JS中的async与await

课程地址

有 4 个返回 Promise 对象的函数 ABCD，现在想让这 4 个 Promise 顺序执行：

const isA = true; const isB = true; const isC = true; const isD = true; function A() { return new Promise((resolve, reject) => { console.log("running A"); setTimeout(() => { if (isA) { resolve("A success"); } else { reject("A fail"); } }, 1000); }); } function B() { return new Promise((resolve, reject) => { console.log("running B"); setTimeout(() => { if (isB) { resolve("B success"); } else { reject("B fail"); } }, 1000); }); } function C() { return new Promise((resolve, reject) => { console.log("running C"); setTimeout(() => { if (isC) { resolve("C success"); } else { reject("C fail"); } }, 1000); }); } function D() { return new Promise((resolve, reject) => { console.log("running D"); setTimeout(() => { if (isD) { resolve("D success"); } else { reject("D fail"); } }, 1000); }); } 方法一

前一个 Promise 的 then 返回下一个 Promise 实例，然后链式调用 then

A().then( (res) => { console.log(res); return B(); } ).then( (res) => { console.log(res); return C(); } ).then( (res) => { console.log(res); return D(); } ).then( (res) => { console.log(res); } ); 方法二

使用 async 和 await：

async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise

await 操作符用于等待一个 Promise 兑现并获取它兑现之后的值。它只能在 async 函数或者模块顶层中使用

await 可以让异步的操作获得同步的写法

async function ABCD() { const resA = await A(); // 同步的写法，但实际上是异步的 console.log(resA); const resB = await B(); console.log(resB); const resC = await C(); console.log(resC); const resD = await D(); console.log(resD); } ABCD();