深入理解ES6以后前端异步玩法async和await

爱被打了一巴掌 2021-07-24 11:35 285阅读 0赞

一、为啥要用异步玩法

二、什么是async和aiwit

2.1 async

2.2 await

三、如何使用async和await

3.1 async语法

3.2 await语法

--------------------

# 深入理解ES6以后前端异步玩法async和await #

# 一、为啥要用异步玩法 #

在很多项目中，经常会出现类似这样的应用场景：先进行一个ajax请求，等请求到数据之后再进行其他操作，这种简单的“前后”关系，有的人可以利用嵌套来解决，但是如果嵌套多了，比如用一个请求的结果来进行下一个请求，再用其结果请求第三个请求，如此下去，如果使用嵌套，那就越套越复杂。伴随着现在的前后端分离，前端遇到这种情况越来越频繁，所以ES6以后出现了一个新的async和await，来很好的处理异步问题。

# 二、什么是async和aiwit #

## 2.1 async ##

async顾名思义就是异步的意思，用于声明一个函数是异步的。其返回的都是一个Promise对象，可以使用then方法添加回调函数，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体后面的语句。同时async适用于任何类型的函数上

## 2.2 await ##

await字面意思看就可以看出是“等待”的意思，用于等待异步完成，并且**await只能在async函数中使用**。

let test =await mytest();  
    //上面这句话的意思的，等着mytest()执行完毕，得到值之后再赋值给test，然后才开始执行这句话下面的代码

# 三、如何使用async和await #

await只能使用在async函数中，因此使用await时候 函数前面必须加上async关键字，基本的格式如下：

async testSync(){
    
     let test= await mytest();
     console.log("执行完毕");  //
    }
    
    
    //调用这个异步函数跟普通函数一样；
    this.testSync();

常用格式：

## 3.1 async语法 ##

（1）async函数返回一个promise

aysnc函数内部设置的return返回的值，会自动成为then方法回调函数的参数。**要想使用async函数的回调then，async必须有个return，不然回调的是“undefined”**。

async function f() {
      return 'hello world';  //返回hello world
    }
    
    f().then(v => console.log(v))
    // "hello world"
    
    //函数f内部return命令返回的值，会被then方法回调函数接收到

（2）async函数内部报错了，返回的promise对象会变成reject状态，抛出的错误对象会被catch方法回调函数接收到。

async function f() {
      throw new Error('出错了');
    }
    
    f().then(
      v => console.log(v),
      e => console.log(e)
    )
    // Error: 出错了

（3）async函数返回的promise对象，必须等到内部所有的await命令的promise对象执行完毕后，才会发生状态改变。也就是说**async函数内部所有的异步操作执行完毕，才会执行其then方法指定的回调函数**。

## 3.2 await语法 ##

（1）正常情况下，await命令后是一个promise对象，如果不是，会被自动转成一个立即resolve的promise对象。也就是说await可以是任何类型的。

async function f() {
      return await 123;
    }
    
    f().then(v => console.log(v))
    // 123
    
    //上述代码中，await命令的参数是123，它被转成promise对象，立即resolve

（2）awiat命令后面的promise对象如果报错了，返回reject状态，则reject参数会自动被catch方法的回调函数接收，即使不用return。

async function f() {
      await Promise.reject('出错了');
    }
    
    f()
    .then(v => console.log(v))
    .catch(e => console.log(e))
    // 出错了
    
    //上面代码，await语句前面没有return，但是reject方法的参数依然传入了catch方法的回调函数里面

特别需要注意的是，**只要有一个await语句后的promise变成了reject，那么整个async函数都会中断**。

async function f() {
      await Promise.reject('出错了');
      await Promise.resolve('hello world'); // 不会执行，因为第一个await语句状态变成了reject
    }

因为多个await时候，为了避免上述情况发生导致下面代码不执行，可以将前面的await放在try...catch...机构里面，这样第二个await就会执行。

async function f() {
      try {
        await Promise.reject('出错了');
      } catch(e) {
      }
      return await Promise.resolve('hello world');
    }
    
    f()
    .then(v => console.log(v))
    // hello world

（3）多个await命令，可以统一放在try....catch结构中

async function main() {
      try {
        var val1 = await firstStep();
        var val2 = await secondStep(val1);
        var val3 = await thirdStep(val1, val2);
    
        console.log('Final: ', val3);
      }
      catch (err) {
        console.error(err);
      }
    }

（4）await命令后面是promise对象，运行结果可能是rejected，所以**最好是吧await命令放到try...catch结构中**。

async function myFunction() {
      try {
        await somethingThatReturnsAPromise();
      } catch (err) {
        console.log(err);
      }
    }
    
    // 另一种写法
    
    async function myFunction() {
      await somethingThatReturnsAPromise()
      .catch(function (err) {
        console.log(err);
      };
    }

（5）多个await命令后面的异步操作，如果不存在依赖关系，是独立的，就会按照顺序进行执行。

let foo = await getFoo();
    let bar = await getBar();
    //getFoo和getBar是两个独立的异步操作，这样只有上面的执行完毕后，才会执行getBar。这样比较耗时间，最好可以写成同时触发，见下面

（6）多个独立await同时执行

// 写法一
    let [foo, bar] = await Promise.all([getFoo(), getBar()]);
    
    // 写法二
    let fooPromise = getFoo();
    let barPromise = getBar();
    let foo = await fooPromise;
    let bar = await barPromise;
    
    //会同时执行，这样比较省时间