前端：你不知道的async await

ゝ一世哀愁。 2023-09-27 14:52 90阅读 0赞

#### 1.先抛出一个场景： ####

你是否在日常开发中经常使用类似代码？

async function getXXList () {
      const result = await this.getArrListApi({page:1,id:2})
      this.arr = result.data.list
      console.log('结果是…', this.arr)
      ……………………其他逻辑代码
    }

###### 1.1 问题 ######

那你是否知道async是什么？作用是什么？await是什么执行逻辑是怎样的？await下面的代码是什么样的执行顺序？

###### 1.2 再举一个实际开发会碰到的业务场景： ######

页面上有一个下拉框，下拉框的选择项数据是页面一加载就向后端请求的，而与此同时，另外一个接口也是页面一加载就发起请求，但是需要携带下拉项的数据，那么我们想法是等待下拉接口数据返回后，我们再把下拉选择的数据给另外一个接口，**也就是说需要等待前一个接口数据返回后，再发起另外一个请求。**

让我们带着一些疑问看下面的文章，相信你会有一个满意的答案

###### 1.3 模拟向后端请求数据看代码执行时机 ######

![659d09ee6af8bd8befb7eaa850a0fcef.gif][]

模拟向后端请求数据

#### 2. 换一个角度看async await ####

> ES7推出了两个关键字 async和 await，用于更加优雅的表达Promise  
> async 函数是什么？一句话，它就是 Generator 函数的语法糖。

**说白了，能用async await的地方也能用promise的链式写法，反之也是一样**

通过上面的动图，我们可以发现，await后面的代码会等待promise状态完成后才会执行，具体的执行逻辑是，await后面的代码相当于then的回调，也就是微任务，加入微任务队列，然后js继续执行其他代码，等到同步任务执行完了再去微任务队列取出来（先进先出原则），再强调一点，await后面的代码相当于promise的成功回调then方法，可能有的同学好奇了，那错误的处理程序呢？ 其实是try catch

async function getXXList () {
      const result = await this.getArrListApi({page:1,id:2})
      this.arr = result.data.list
      console.log('结果是…', this.arr)
      ……………………其他逻辑代码
    }
    ----------------以上代码可以等价于下面的代码------------------------------
    function getXXList () {
      const result = new promise((resolve,reject)=>{
          return this.getArrListApi({page:1,id:2})
        }).then((result)=>{
              this.arr = result.data.list
              console.log('结果是…', this.arr)
              ……………其他逻辑代码
           }) 
    
      
    
    }

#### 3. async await 的错误处理是try catch await 后面的相当于then成功的回调 ####

### **4. async** ###

> **async关键字用于修饰函数，被它修饰的函数，一定返回Promise**

async 1 = promise.resolve(1) //这是伪代码

async function method1(){
      return 1; // 该函数的返回值是Promise完成后的数据
    }
    
    method1(); // Promise { 1 }
    
    async function method2(){
      return Promise.resolve(1); // 若返回的是Promise，则method得到的Promise状态和其一致
    }
    
    method2(); // Promise { 1 }
    
    async function method3(){
      throw new Error(1); // 若执行过程报错，则任务是rejected
    }
    
    method3(); // Promise { <rejected> Error(1) }

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

### **5. await** ###

> await 关键字表示等待某个Promise完成，**它必须用于** **async** **函数中**

async function method(){
      const n = await Promise.resolve(1);
      console.log(n); // 1
    }
    
    // 上面的函数等同于
    function method(){
      return new Promise((resolve, reject)=>{
        Promise.resolve(1).then(n=>{
          console.log(n);
          resolve(1)
        })
      })
    }

###### 5.1 await也可以等待其他数据 ######

async function method(){
      const n = await 1; // 等同于 await Promise.resolve(1)
    }

5.2 如果需要针对失败的任务进行处理，可以使用try-catch语法

async function method(){
      try{
        const n = await Promise.reject(123); // 这句代码将抛出异常
        console.log('成功', n)
      }
      catch(err){
        console.log('失败', err)
      }
    }
    
    method(); // 输出： 失败 123

#### 6.练习 ####

// 完成delay函数
    // 该函数可以等待一段指定的时间
    // 返回Promise
    function delay(duration) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, duration);
      });
    }
    
    // 利用delay函数，等待3次，每次等待1秒，每次等待完成后输出ok
    // 等待1秒->ok->等待1秒->ok->等待1秒->ok
    
    (async () => {
      for (let i = 0; i < 3; i++) {
        await delay(1000);
        console.log('ok');
      }
    })();
    
    // delay(1000)
    //   .then(() => {
    //     console.log('ok');
    //     return delay(1000);
    //   })
    //   .then(() => {
    //     console.log('ok');
    //     return delay(1000);
    //   })
    //   .then(() => {
    //     console.log('ok');
    //   });

[659d09ee6af8bd8befb7eaa850a0fcef.gif]: https://img-blog.csdnimg.cn/img_convert/659d09ee6af8bd8befb7eaa850a0fcef.gif