JavaScript async await

时间: 2024-10-20 08:53:16

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

async 和 await 是 JavaScript 中用于处理异步操作的关键字，是现代 JavaScript 中的一个重要特性，提供了一种更简洁的方式来编写异步代码，避免了回调函数地狱和复杂的 Promise 链。以下是对 async 和 await 的详细解释及示例。

1. async 函数

- async 关键字可以用在函数的声明前面，表示该函数是异步的。

- 异步函数总是返回一个 Promise。如果函数内部返回一个非 Promise 的值，JavaScript 会自动将其包装为一个 Promise。

- 使用 async 定义的函数使得在函数内部可以使用 await。

示例：

javascript
async function fetchData() {
    return "数据获取成功!";
}

fetchData().then(result => {
    console.log(result); // 输出: 数据获取成功!
});

2. await 表达式

- await 只能在 async 函数内部使用。

- 它会暂停函数的执行，直到 Promise 完成，并返回 Promise 的结果。

- 如果 Promise 被拒绝，则会抛出错误，可以使用 try/catch 来捕获。

示例：

javascript
function simulateFetch() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("数据获取成功!");
        }, 2000);
    });
}

async function getData() {
    console.log("正在获取数据...");
    const data = await simulateFetch(); // 暂停，等待 Promise 解决
    console.log(data); // 输出: 数据获取成功!
}

getData();

3. 错误处理

使用 try/catch 可以处理 await 中的错误，而不是在 Promise 链中处理：

javascript
async function getDataWithError() {
    try {
        const data = await simulateFetch(); // 假设这里会出错
        console.log(data);
    } catch (error) {
        console.error("获取数据失败:", error);
    }
}

getDataWithError();

4. 并行执行

如果需要并行执行多个异步操作，可以开启多个 Promise，再使用 await Promise.all()：

javascript
function fetchResourceA() {
    return new Promise(resolve => setTimeout(() => resolve("资源 A"), 1000));
}

function fetchResourceB() {
    return new Promise(resolve => setTimeout(() => resolve("资源 B"), 2000));
}

async function fetchResources() {
    console.log("同时获取资源...");
    const [resourceA, resourceB] = await Promise.all([fetchResourceA(), fetchResourceB()]);
    console.log(resourceA); // 输出: 资源 A
    console.log(resourceB); // 输出: 资源 B
}

fetchResources();

5. 总结

- async/await 使得异步编程更简洁易懂，减少了使用回调和 Promise 链的复杂性。

- 强烈建议在涉及异步操作的情况下使用 async/await，因为它提高了代码的可读性和可维护性。

通过使用 async 和 await，您可以以同步的方式编写异步代码，简化了逻辑流并减少了错误的可能性。