关于async/await的总结

作者: Mr无愧于心 | 来源:发表于2018-06-08 14:57 被阅读74次

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

  • 一句话:是用来解决异步流程问题的。

  • 避免回调地狱(callback hell),且以最接近同步代码的方式编写异步代码

  • async/await是对co模块的升级,内置生成器函数的执行器,不再依赖co模块。

  • 不了解promise的请点击

  • generator的相关文章请点击

---语义---

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)。
    语法简洁,代码优雅
    每次都能拿到异步函数的返回值,避免嵌套

相关文章

网友评论

    本文标题:关于async/await的总结

    本文链接:https://www.haomeiwen.com/subject/jijgsftx.html