原文参考 JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!
之前写过一篇文章初学async,但只是粗略的会用并且没有出错而已,并不是很理解其中的运行过程,当看前端小智的博客时才发现自己在用async时犯了一个错误,如果一个函数是async函数,就不需要用then了,因为await就表示等待的意思,再用then就重复了。
JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!此文中说:
调用使用 async 声明函数时,它返回一个 Promise。当这个函数返回一个值时,这个值只是一个普通值而已,这个函数内部将自动创建一个承诺,并使用函数返回的值进行解析。当这个函数抛出异常时,Promise 将被抛出的值拒绝。
使用 async 声明函数时可以包含一个 await 符号,await 暂停这个函数的执行并等待传递的 Promise 的解析完成,然后恢复这个函数的执行并返回解析后的值。
function getNumber1() {
return Promise.resolve('374');
}
// 这个函数与getNumber1相同
async function getNumber2() {
return 374;
}
也就是说,用了async函数就会自动返回Promise,不用再在then函数里resolve(res);那如果这样的话,我的上篇初学async中的异步函数是可以优化的。源代码如下:
//我们在这里声明了一个变量,接住promise里resolve的数据
let menuData = await axios({
method: 'post',
url:url,
headers:{'Content-type': 'application/json'},
data:data
}).then((res)=>{
if(res.data.code===0){
return new Promise((reslove, reject) => {
reslove(res.data.data);
})
}else{
message.error(res.data.message);
}
});
那去掉then后,结果会自动存放进Promise的resolve里(包括抛出的错误):
let res = await axios({
method: 'post',
url:url,
headers:{'Content-type': 'application/json'},
data:data
});
let menuData;
if (res && res.data.code===0) {
menuData = res.data.data;
} else {
message.error(res && res.data.message);
}
这样看上去代码瞬间感觉简洁了不少。