【进阶】Event Loop 常考面试题

script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

什么是 ansyc/await

async/await 是 JS 中用于处理异步操作的一种语法糖，它基于 Promise，使得异步代码的编写和阅读更加简洁和清晰。async 函数用于定义一个返回 Promise 对象的异步函数，而 await 用于等待一个 Promise 对象的解决。简单点说，就是在Promise的基础上做了点优化，具体有哪些我们继续往后看。

现在有以下异步任务：

function A() {
    setTimeout(()=>{
        console.log('异步A完成');
    },1000)
}
function B() {
    setTimeout(()=>{
        console.log('异步B完成');
    },500)
}
function C() {
    setTimeout(()=>{
        console.log('异步C完成');
    },100)
}
A()
B()
C()

正常调用这个三个函数，得到的打印结果为：

异步C完成

异步B完成

异步A完成

如果我们现在就是先要打印顺序为 A、B、C，那么我们一般会使用Promise（详情见——面向小白编程：Promise 的浅入深出）

function A() {
    return new Promise((resolve, reject)=> {
        setTimeout(()=>{
            console.log('异步A完成');
            resolve()
        },1000)
    })
}

function B() {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            console.log('异步B完成');
            resolve()
        },500)
    })
}
function C() {
    setTimeout(()=>{
        console.log('异步C完成');
    },100)
}
A()
.then(()=>{
    return B()
})
.then(()=>{
    C()
})

通过Promise.then()方法我们能轻易控制异步任务的打印顺序。

但是今天我们又要介绍一种新的处理异步的方法——ansyc/await，如何使用呢？

1. 定义异步函数： 使用 async 关键字声明一个异步函数。异步函数会返回一个 Promise 对象。

async function foo() {
  // 异步操作...
}

2. 使用 await 等待异步操作完成： 在 foo 函数中，通过 await 关键字等待异步函数 A、B、C 完成。await 会暂停 foo 函数的执行，直到对应的异步操作完成。

function A() {
    return new Promise((resolve, reject)=> {
        setTimeout(()=>{
            console.log('异步A完成');
            resolve()
        },1000)
    })
}
function B() {
    return new Promise((resolve, reject)=> {
        setTimeout(()=>{
            console.log('异步B完成');
            resolve()
        },500)
    })
}
function C() {
    return new Promise((resolve, reject)=> {
        setTimeout(()=>{
            console.log('异步C完成');
            resolve()
        },100)
    })
}

async function foo() {
    await A();  
    await B();  // 等待异步A完成
    await C();  // 等待异步B完成
}
foo();

3. 最终调用foo函数就可以得到打印结果：

异步A完成

异步B完成

异步C完成