为了账号安全,请及时绑定邮箱和手机立即绑定

关于async/await的总结

标签:
JavaScript

---async和await是干什么用的---

---语义---

async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve,并拿到结果。

function aaa(){      return new Promise((resolve) => {//返回一个promise对象
          setTimeout(function(){//这里使用计时器模拟异步,也可以使用ajax,node异步读写等。。
              resolve(123);  //异步执行resolve函数
          },2000)
      })
  }  async function getaaa(){      let a=await aaa();//等待aaa函数的执行结果
      console.log(a)//拿到执行的返回值
  }
  getaaa()//调用这个函数

---async和await的用法---

  • 一般用法(模拟同步写法)

var sleep = function (time) {    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();//也可以把resolve写在sjax的sussess的回调中,都是异步调取
        }, time);
    })
};var start = async function () {    // 在这里使用起来就像同步代码那样直观
    console.log('start');//立即打印start
    await sleep(3000);//等待三秒
    console.log('end');//三秒后打印end  };

start();
  • async函数捕捉异常(也可以用promise对象链上的catch方法)

var sleep = function (time) {    return new Promise(function (resolve, reject) {
        setTimeout(function () {            // 模拟出错了,返回 ‘error’
            reject('error');
        }, time);
    })
};var start = async function () {    try {        console.log('start');        await sleep(3000); // 这里得到了一个返回错误
        // 所以以下代码不会被执行了,会走catch
        console.log('end');
    } catch (err) {        console.log(err); // 这里捕捉到错误 `error`
    }
};
  • 并行(依赖于Promise.all方法)

let count = ()=>{    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(100);
        },500);
    });
}let list = ()=>{    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}let getList = async ()=>{    let result = await Promise.all([count(),list()]);    return result;
}//调用getList().then(result=> {    console.timeEnd('begin');  //begin: 505.557ms后才执行
    console.log(result);       //[ 100, [ 1, 2, 3 ] ]}).catch(err=> {    console.timeEnd('begin');    console.log(err);
});

对比Promise,co,async/await的区别

  • 1.promise
    链式调用
    避免回调地狱(连环嵌套)
    每次then拿取返回值不能跨then拿取数据,只能拿到当前的上一个传下来的
    new Promise(...).then(res1=>{}).then(res2=>{}).then(res3=>{这里想要用res1需要一步一步传下来才行})

  • 2.co
    需要引用插件
    依赖generator

  • 3.async/await()----最好用!!!!
    ES7 中更加标准的解决方案(需要babel)。
    语法简洁,代码优雅
    每次都能拿到异步函数的返回值,避免嵌套



作者:Mr无愧于心
链接:https://www.jianshu.com/p/0589cda11deb


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消