什么是Async await,和Promise有什么区别

2022-11-15 16:24:01 浏览数 (1)

前两篇文章给大家介绍了Promise和如何实现一个简单的Promise,那么什么是Async await呢,他们又有什么关系呢

Async/await:是一个用同步思维解决异步问题的方案

  1. 会自动将常规函数转换成Promise,返回值也是一个Promise对象
  2. 只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数
  3. 异步函数内部可以使用await
  4. await 放置在Promise调用之前,await 强制后面点代码等待,直到Promise对象resolve,得到resolve的值作为await表达式的运算结果
  5. await只能在async函数内部使用,用在普通函数里就会报错

和Promise相比较 相同点

为了解决异步流程问题,promise是约定,而async更优雅

区别

  1. Promise是ES6,而async是ES7
  2. Promise原来有规范的意义,Promise a,b,c,d 等规范,最终确定的是Promise a 规范
  3. Promise链式操作,自己catch异常。async则要在函数内catch,好在现在catch成本较低
  4. Promise有很多并行神器,比如Promise.allPromise.race等。这些是async没法搞定的
  5. Promise是显式的异步,而 Async/await 让你的代码看起来是同步的,你依然需要注意异步
  6. Promise即使不支持es6,你依然可以用promise的库或polyfil,而async就很难做,当然也不是不能,成本会高很多
  7. async functions 和Array.forEach等结合,很多tc39提案都在路上或者已经实现,处于上升期,而promise也就那样了

总结:Async/awati 简单好用,是大势,肯定得学,而async的使用绕不开Promise,所以Promise是必会的。

下面的例子简单介绍一下Async/await 使用方法;

代码语言:javascript复制
        function a() { 
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('a执行'); resolve(3) }, 3000)
            });
        }

        function b() {
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('b执行'); resolve(20) }, 2000)
            });
        }

        async function doIt() {
            try {  // async方法会吞掉所有报错信息,如果此例子中b()返回的是reject,不使用try...catch的话,无法获取到错误信息
                const res1 = await a();
                const res2 = await b();      //  这样的写法是不是很符合同步思维呢
                console.log(res1   res2);
            } catch (err) {
                console.log(err)
            }

        }
        
		// Promise  方法调用 
		
        // function doIt() {
        //     a().then(res1 => {
        //         return b().then(res2 => {
        //             console.log(res1   res2)
        //         })
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // }

        doIt();  // a执行  b执行  23

0 人点赞