还是 Vue loading 过场的疑问？

原来登录界面没有等待的过场傻等，后来学习大家的都有个 Loading 或者 Checking 的过场，就用 v-if 加了。登录请求后台返回后就取消 loading ，成功了就跳转业务页面，失败就重新登录，逻辑上很简单没啥问题。

但是跑起来发现个问题，跳转的业务页面需要资源比较多，第一次加载要个 1-2 秒，这时候会即使成功了先跳出登录界面 1-2 秒，再被业务页面覆盖，这就有点尴尬。

我现在的办法是如果登录成功，就不改 loading 了，一直转到业务页面加载出来。登录失败才改 loading 。这个是不是不太优雅。

没进过厂，想请教这个小问题是怎么处理的？

<template>
  <div>
    <div v-if="isLoading">
      <LoadingSpinner />
    </div>
    <div v-else>
    //登录页面
    ....
    </div>
  </div>
  ...
</template>

<script lang="ts">
....
const setup(){
    const btnClick = () => {
      if (username.value && password.value) {
        authStore.returnUrl = route.query.redirect;
        isLoading.value = true;
        authStore
          .login(username.value, password.value)
          .then((ret) => {
            if (ret !== 0) {
              message.warning("账号或密码错误。");
              **isLoading.value = false; //现在在这里**
            } else {
              message.success("登录成功");
              router.push((route.query.redirect as LocationQueryValue) || "/");
            }
          })
          .catch((err) => {
            console.error(err);
          })
          .finally(() => {
            **// isLoading.value = false; //原来在这里**
          });
      } else {
        message.warning("请输入用户名和密码。");
      }
    };
}
....
</script>

elboble

2023-03-17 12:05:47 +08:00

@op351 我也不太清楚，我是这样分析的，开始 isLoading.value = false 是在 finally 里，这样后端登录校验返回后，无论正确错误，isLoading 都会 false 。如果正确，应该 router.push 到业务界面了，但是因为业务界面加载时间长，或者其他原因比较慢，会进 v-else ，就是又出现了登录界面。

所以后来我把 isLoading.value = false 只放到登录失败的情况里，如果正确自然就不会进 v-else 了。

对了，这是个单页面应用。

molvqingtai

2023-03-17 12:11:50 +08:00

从代码可以看出登录交互有问题，登录页面 loading 时也应该一直存在，loading 可以弹个 toast loading 或者 button loading ，未避免接口响应太快，导致 loading 动画闪一下有个巧妙的解决办法：

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

await Promise.allSettled([sleep(1000), login()]);
// loading 结束跳转到首页

lscho

2023-03-17 18:42:28 +08:00

楼上正解，你的 loading 其实是两个页面的状态，第一个是登录页面的请求等待状态，第二个是登录成功跳转目标页面资源加载、数据初始化的状态。你的做法只解决了第一个登录页面的请求等待状态，但是第二个页面的初始化状态没有解决。

所以把 loading 提出来放到全局 store 中，点击登录按钮时开始 loading ，直到第二个页面加载完再结束 loading

cyrbuzz

2023-03-17 19:05:19 +08:00

感觉你这个直接把 v-if="isLoading"扩展成 v-if="isLoading || isLogin"就完事了。

分析下来你的 loading 仅处理了是不是完成了登录 API 的调用，完全没什么问题，逻辑紧密也很容易理解。

理想情况下 loading 完之后应该立即跳转到下一个页面，不应该在当前页面停留，但因为某些原因导致仍然会在此页面停留一段时间，就导致了问题。

顺着这条路解决思路就是：
1. 在继续停留的这段时间内仍然保持 loading 状态(做法如前所说，loading 的判断变成是否处在 API 调用中或者是否已经登录，或者楼上说的在下个页面处理(= =不太推荐，这样逻辑太撕裂了))。
2. 专门做一下路由切换的过渡动画，这个 Vue 开箱即用，https://router.vuejs.org/zh/guide/advanced/transitions.html 。
3. 预(懒)加载一些资源(楼上说的异步组件)，让将要去的页面尽快显示出来。

如果是我的话= =，通用性强的方法就是 2+3 一起做，实际上也应该是项目中应该做到的事情(ToC)，省事就 1 咯。

elboble

2023-03-18 11:32:55 +08:00

@lscho @cyrbuzz @molvqingtai @op351 @djkloop @Huelse @hervey0424 感谢各位。
现在没用单独的 loading 界面，直接用带 loading 的按钮，这样登录界面不消失，就需要在 isloading 中 disable input 和 button 了，界面没闪，问题没那么明显。

关键问题是业务页面加载慢的问题，按道理应该是业务页面加载也要有 loading 过场。
不过暂时就用登录正确就不切换 isloading 状态了，直接等业务页面加载出来，最简单。

transition 还在学习中。

这么个基本的交互，前端都有这么多坑，按道理要求应该很高，不至于像 V 上说的这么卷吧。