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