JavaScript async/await 异步函数入门

简介

async/await 是 JavaScript 用于处理异步操作的一种语法糖，它基于 Promise，使得异步代码的可读性更接近同步代码

async 关键字

示例

async function foo() {
    return "Hello";
}
foo().then(console.log); // 输出: Hello

等价于

function foo() {
    return Promise.resolve("Hello");
}
foo().then(console.log); // 输出: Hello

await 关键字

async function fetchData() {
    let result = await new Promise(resolve => {
        setTimeout(() => resolve("数据加载完毕"), 2000);
    });
    console.log(result);
}
fetchData();

执行流程：

1. await 让 JavaScript 引擎暂停 fetchData 函数的执行，并等待 Promise 解析
2. 其他任务可以继续执行，不会阻塞主线程
3. Promise 解析后，继续执行 fetchData 函数

处理错误

async function fetchData() {
    try {
        let result = await new Promise((_, reject) => {
            setTimeout(() => reject("发生错误"), 2000);
        });
        console.log(result);
    } catch (error) {
        console.error("错误:", error);
    }
}
fetchData();

执行流程：

1. await 发生 Promise 拒绝（reject）
2. try 捕获不到时，错误会抛出到全局（UnhandledPromiseRejection）
3. catch 捕获到错误，打印 错误: 发生错误

底层原理

简介

• async 函数本质上 返回一个 Promise
• await 其实是 Promise.then 的语法糖，JavaScript 引擎会暂停 async 函数的执行，等待 Promise 解析后继续执行

示例

async function foo() {
    let result = await someAsyncFunction();
    console.log(result);
}

相当于

function foo() {
    return someAsyncFunction().then(result => {
        console.log(result);
    });
}