使用 .then() 嵌套异步函数

Nesting async functions with .then()

一段时间后重新访问 web 开发,我想在没有旧回调地狱范例的情况下将异步函数链接在一起

所以我的 React 应用程序中有一个登录组件,带有 onFinish 函数(使用 AntD):

onFinish(values) {
    const req = {
      email: values.email,
      password: values.password
    }
    userService.getUser(req)
      .then((res) => console.log('complete', res))
      .catch((err) => console.log(err))
  }

并且我构建了一个服务层来连接我的 API:

//In userService.js
async function getUser(req) {
  console.log(req);
  axios
    .get("/api/user", {params: {email: req.email, password: req.password}
  })
    .then((res) => {
      if (res.data) {
        console.log('we have data');
        return res.data;
      } else {
        console.log('no data');
        return res.data;
      }
    })
    .catch((err) => console.log(err));
}

我希望 userService.getUser(req) 中的两个控制台日志在我们进入 onFinish() 函数中的 .then() 之前完成。当我测试无效登录时,我的控制台输出是

Object { email: "XX@XX.com", password: "XX" } user.service.js:27
complete undefined login.component.js:22
no data user.service.js:36

关于我遗漏的任何指导?也很想知道我将最终的第三个函数 saveJWTToken(user) 放在哪里,而不是在 userService.getUser(req) 完成后运行,但需要将其输出传回 onFinish()

有两件事你需要知道,

首先,您需要 return 来自 getUser 函数的请求 其次,如果您在其他地方捕获错误,则不需要在用户请求中捕获

此外,由于 promises 是可链接的,您可以在 getUser

的 .then 中调用 saveJWTToken(user)
//In userService.js
function getUser(req) {
  return axios
    .get("/api/user", {params: {email: req.email, password: req.password}
  })
    .then((res) => {
      if (res.data) {
        console.log('we have data');
        return res.data;
      } else {
        console.log('no data');
        return res.data;
      }
    }).then(() => {
        const token = saveJWTToken(user);
        return {user, token}
    })
}