async/await 方法详解，举例说明-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

async/await 是 JavaScript 中用于处理异步操作的语法糖，它建立在 Promise 的基础之上，使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。下面详细介绍 async/await 方法，并通过示例说明。

基本概念

1. `async` 函数

async 用于声明一个异步函数，该函数总是返回一个 Promise 对象。如果函数内部没有显式返回 Promise，则会将返回值包装在一个已解决（resolved）的 Promise 中。

2. `await` 关键字

await 只能在 async 函数内部使用。
await 用于等待一个 Promise 被解决（resolved）或被拒绝（rejected），并暂停 async 函数的执行，直到 Promise 有结果。
如果 Promise 被解决，await 会返回 Promise 的解决值；如果 Promise 被拒绝，await 会抛出拒绝原因。

示例代码

示例 1：简单的 `async/await` 使用

// 模拟一个异步操作，返回一个 Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据已获取');
        }, 2000);
    });
}

// 定义一个 async 函数
async function getData() {
    try {
        // 使用 await 等待 Promise 解决
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error('发生错误:', error);
    }
}

// 调用 async 函数
getData();

代码解释：

fetchData 函数模拟了一个异步操作，使用 setTimeout 模拟 2 秒的延迟，然后通过 resolve 返回结果。
getData 是一个 async 函数，在函数内部使用 await 等待 fetchData 返回的 Promise 被解决。如果 Promise 被解决，await 会返回解决值并赋值给 result 变量；如果 Promise 被拒绝，会抛出错误，通过 try...catch 捕获并处理。

示例 2：多个异步操作按顺序执行

// 模拟异步操作 1
function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1 已获取');
        }, 1000);
    });
}

// 模拟异步操作 2
function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2 已获取');
        }, 1500);
    });
}

// 定义 async 函数
async function getDataSequentially() {
    try {
        const data1 = await fetchData1();
        console.log(data1);

        const data2 = await fetchData2();
        console.log(data2);
    } catch (error) {
        console.error('发生错误:', error);
    }
}

// 调用 async 函数
getDataSequentially();

代码解释：

fetchData1 和 fetchData2 分别模拟两个异步操作，有不同的延迟时间。
getDataSequentially 是一个 async 函数，使用 await 依次等待 fetchData1 和 fetchData2 的 Promise 被解决，确保两个异步操作按顺序执行。

示例 3：与 `Promise.all` 结合使用

// 模拟异步操作 1
function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1 已获取');
        }, 1000);
    });
}

// 模拟异步操作 2
function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2 已获取');
        }, 1500);
    });
}

// 定义 async 函数
async function getDataInParallel() {
    try {
        const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
        console.log(data1);
        console.log(data2);
    } catch (error) {
        console.error('发生错误:', error);
    }
}

// 调用 async 函数
getDataInParallel();

代码解释：

Promise.all 用于并行执行多个 Promise，并返回一个新的 Promise，当所有 Promise 都被解决时，新的 Promise 才会被解决，解决值是一个包含所有 Promise 解决值的数组。
getDataInParallel 是一个 async 函数，使用 await 等待 Promise.all 返回的 Promise 被解决，然后通过解构赋值获取每个 Promise 的解决值。

通过以上示例可以看出，async/await 让异步代码的编写和阅读更加直观和方便。

THE END