React 使用async await实现mock登录服务返回null问题求助

你写的login方法里await setTimeout是无效的：setTimeout返回值是数字类型的计时器ID，不是Promise对象，await不会等待计时器执行完毕，会直接执行后续的return user语句，这时候5秒的计时器回调还没触发，user还是初始的null，所以你拿到的返回值自然是空。

只需要修改user service的login方法，把异步逻辑包裹在原生Promise里即可，修改后代码如下：

let user = null;

const login = (credentials) => {
  // 返回Promise实例供外层await调用
  return new Promise((resolve) => {
    setTimeout(() => {
      user = {
        name: "test user",
        username: credentials.username,
        password: credentials.password,
        token: "test token",
      };
      console.log("login service finished");
      // 异步执行完成后通过resolve抛出返回值
      resolve(user);
    }, 5000);
  });
};

修改后你原本的类组件、函数组件代码不需要做任何调整，await UserService.login就会正确等待5秒，拿到赋值完成的user对象。

如果需要模拟登录失败的场景，也可以在Promise里新增reject逻辑，示例如下：

const login = (credentials) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟密码错误的失败场景
      if(credentials.password !== '123456') {
        reject(new Error('密码错误'))
        return
      }
      user = {
        name: "test user",
        username: credentials.username,
        password: credentials.password,
        token: "test token",
      };
      resolve(user);
    }, 5000);
  });
};

内容的提问来源于stack exchange，提问作者demiglace