再学async

原文参考 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);
}

这样看上去代码瞬间感觉简洁了不少。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容