Promise、async/await 是 JavaScript 中多用来处理异步操作的方法,它们之间存在关系和互相补充的特性。
Promise 是一种用于处理异步操作的对象,它可以表示一个异步操作的最终完成或失败,并可以在操作完成后获取结果或处理错误。通过 Promise,我们可以使用链式调用来处理多个异步操作,使代码更具可读性。
async/await 是基于 Promise 的一种语法糖,它提供了一种更直观和同步化的方式来编写异步代码。通过使用 async 关键字声明一个函数为异步函数,并使用 await 关键字来等待 Promise 对象的解决(即完成或拒绝),我们可以以同步的方式编写异步操作的代码。
关系:
- Promise 可以在其回调函数中使用 async/await 语法来进行异步操作。通过将异步操作封装在 Promise 对象中,我们可以使用 async/await 来更清晰地表达异步操作的顺序和依赖关系。
- async 函数始终返回一个 Promise 对象,它会自动将函数的返回值包装在一个已解决(resolved)的 Promise 中。这意味着我们可以在 async 函数中使用 await 来等待其他 Promise 的完成,并以同步的方式处理它们的结果。
- 如果 await 后跟的不是promise,会进行自动使用 Promise.resolve()转换,完成后将后续代码推入微队列;若后续没有代码,会将任务完成结束推到微队列
- 使用 async/await 可以使异步代码的编写更加简洁和可读。它可以避免嵌套的回调函数和过多的 .then() 调用,使得异步代码更接近于同步代码的写法,提高了代码的可维护性和可理解性。
示例:
async function async1() {
console.log(1)
await async2()
console.log(2)
};
const async2 = async () => {
await setTimeout(() => {
Promise.resolve().then(() => {
console.log(3)
})
console.log(4)
},0)
}
const async3 = async () => {
Promise.resolve().then(() => {
console.log(6)
})
}
async1()
console.log(7)
async3()
// 1
// 7
// 6
// 2
// 4
// 3
解释运行:
1.首选运行 async1(),先找同步代码(await 之前的代码),同步代码运行完成后,才可以取队列中的代码,输出 1;
进入async2() 运行,将 setTimeout 回调(一段时间间隔后将回调函数)推入宏队列,async2 内容完成后推入微队列;
await async2 返回的内容完成后再继续执行函数 async1, 此时async1 运行结束;
2.输出7;
3.运行async3(),promise.then() 推入微队列。
此时同步代码全部完成,队列中包括:
宏任务:计时器回调
微任务:async2 完成,6
4.清空微任务:
async2 完成,打印2 被推入微队列;
输出6;
输出2;
5.进行一个宏任务:
计时器回调运行:打印3推入微队列,输出4
6.清空微任务:输出3