手记

关于async/await的总结

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


0人推荐
随时随地看视频
慕课网APP