Promise应用 - 登录状态

在项目开发过程中，经常会遇到以下这种情况：

登录、获取用户信息等写在全局的src/app.js文件中，在此处获取到用户信息;
在某些页面中，需要获取到用户信息后，再请求某些接口。

这个时候，我们就需要在这些页面中，先判断用户信息是否请求回来了。等请求回来了之后再请求该页面接口。

这种情况我们可以借助Promise实现。具体实现方法如下：

• 在src/lib/utils.js文件中添加代码

let _loginResolve = null
// onEnvReady直接赋值Promise对象，不要用方法返回Promise对象。
export const onLoginReady = new Promise((resolve) => (_loginResolve = resolve));
export function setLoginReady() {
  _loginResolve && _loginResolve(true);
}

• 修改src/app.js文件

import { setLoginReady } from '@/lib/utils'

async () => {
  await login()
  await getUserInfo()
  // 登录，获取用户信息后，设置状态
  setLoginReady()
}

• 在对应的页面，添加以下代码

import { onLoginReady } from '@/lib/utils'

onLoginReady.then(() => {
  // 请求该页面接口
})