前端：你不知道的async await

1.先抛出一个场景：

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

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