当前位置：首页 > news >正文

JS 中的 async 与 await

news 2025/7/3 17:40:55

课程地址

有 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();