Question

一段时间后重新访问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)函数中的.then()之前，我想先完成onFinish()中的两个控制台日志。当我测试无效的登录名时，控制台输出为

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()

Answer 1

有两件事，你需要知道，

首先，您需要从getUser函数返回请求其次，如果您在其他地方捕获错误，则无需捕获用户请求

由于promise是可链接的，因此您可以在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}
    })
}

使用.then（）嵌套异步函数

1 个答案: