前端：你不知道的async await

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 模拟向后端请求数据看代码执行时机

模拟向后端请求数据

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');
//   });