使用 .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}
})
}
一段时间后重新访问 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}
})
}