白骑士的JavaScript教学进阶篇之异步编程 3.2.4 异步错误处理

        在处理异步操作时，错误处理是一个至关重要的方面。虽然 ‘Promise‘ 和 ‘async/await‘ 极大地简化了异步代码的编写，但错误仍然可能发生，并且需要妥善处理。异步错误处理不同于同步代码中的错误处理，主要因为异步操作的非阻塞性和异步性。掌握异步错误处理技巧，不仅能提升代码的鲁棒性，还能提高代码的可维护性和可读性。在本节中，我们将探讨如何在使用 ‘Promise‘ 和 ‘async/await‘ 时，处理可能发生的错误。

使用Promise进行错误处理

        在使用 ‘Promise‘ 时，可以通过 ‘catch‘ 方法捕获 ‘Promise‘ 中抛出的错误。任何在 ‘Promise‘ 链中发生的错误，都会被最近的 ‘catch‘ 捕获，这使得错误处理变得简单而集中。

基本的错误捕获

示例

let fetchData = new Promise((resolve, reject) => {
    let success = false; // 模拟失败的异步操作

    if (success) {
        resolve("Data fetched successfully");
    } 

    else {
        reject("Error fetching data");
    }
});


fetchData
    .then((data) => {
        console.log(data);
    })

    .catch((error) => {
        console.error("Caught an error:", error); // 输出: Caught an error: Error fetching data
    });

        在这个示例中，‘fetchData‘ 是一个 ‘Promise‘，它可能会被拒绝。如果 ‘reject‘ 被调用，‘catch‘ 方法就会捕获到错误，并进行相应的处理。

捕获链式调用中的错误

        当 ‘Promise‘ 链中的任意一个 ‘then‘ 发生错误时，这个错误也会被链中的 ‘catch‘ 捕获。

示例

let fetchData = new Promise((resolve) => {
    resolve("Initial data");
});


fetchData
    .then((data) => {
        console.log(data);
        throw new Error("Something went wrong in then");
    })

    .then(() => {
        console.log("This will not be executed due to the error above");
    })

    .catch((error) => {
        console.error("Caught an error in chain:", error.message); // 输出: Caught an error in chain: Something went wrong in then
    });

        在这个示例中，第二个 ‘then‘ 中抛出的错误被后面的 ‘catch‘ 捕获，这表明即使错误发生在链的中间，也可以在链的最后进行处理。

使用async/await进行错误处理

        ‘async/await‘ 是基于 ‘Promise‘ 的语法糖，所以在处理错误时，也遵循 ‘Promise‘ 的错误处理机制。我们可以使用 ‘try...catch‘ 来捕获 ‘await‘ 操作中的错误，使得代码更具同步性和可读性。

基本的错误捕获

示例

async function fetchData() {
    try {
        let response = await Promise.reject("Failed to fetch data");
        console.log(response);
    } 

    catch (error) {
        console.error("Caught an error with async/await:", error); // 输出: Caught an error with async/await: Failed to fetch data
    }
}


fetchData();

        在这个示例中，‘await‘ 正在等待一个被拒绝的 ‘Promise‘，这个错误通过 ‘try...catch‘ 结构被捕获并处理。

处理多个异步操作中的错误

        在处理多个异步操作时，使用 ‘async/await‘ 可以让你分别处理每个异步操作的错误，或者通过一次 ‘try...catch‘ 处理所有错误。

示例：逐步处理错误

async function fetchMultipleData() {
    try {
        let data1 = await Promise.resolve("Data 1");
        console.log(data1);

        let data2 = await Promise.reject("Failed to fetch data 2");
        console.log(data2); // 这行代码不会被执行
    } 

    catch (error) {
        console.error("Caught an error:", error); // 输出: Caught an error: Failed to fetch data 2
    }
}


fetchMultipleData();

        在这个示例中，第一个 ‘await‘ 成功返回数据，第二个 ‘await‘ 抛出错误并被捕获。如果第一个操作失败，错误将立即被 ‘catch‘ 捕获，后续代码不会执行。

集中处理错误

        你也可以选择一次性处理所有可能的错误，这种方式适合在多个异步操作之间存在依赖关系的场景。

示例：集中处理错误

async function fetchAllData() {
    try {
        let data1 = await Promise.resolve("Data 1");
        let data2 = await Promise.resolve("Data 2");
        let data3 = await Promise.resolve("Data 3");

        console.log(data1, data2, data3); // 输出: Data 1 Data 2 Data 3
    } 

    catch (error) {
        console.error("Caught an error during fetch:", error);
    }
}


fetchAllData();

        在这个示例中，所有 ‘await‘ 操作都在一个 ‘try‘ 块中进行，因此只需要一次 ‘catch‘ 就能捕获到所有可能的错误。

常见的异步错误处理陷阱

忘记return Promise

        在 ‘async‘ 函数中，如果你没有 ‘return‘ 一个 ‘Promise‘ 或者 ‘await‘ 操作，可能会导致未捕获的错误。

示例

async function problematicFunction() {
    new Promise((resolve, reject) => {
        setTimeout(() => reject("Error inside Promise"), 1000);
    });
}


problematicFunction().catch((error) => console.error("This won't catch the error:", error));

        在这个示例中，‘problematicFunction‘ 内部的 ‘Promise‘ 没有被 ‘return‘ 或 ‘await‘，导致外部无法捕获到 ‘Promise‘ 内部抛出的错误。解决方法是 ‘return‘ 或 ‘await‘ 这个 ‘Promise‘。

改正

async function fixedFunction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject("Error inside Promise"), 1000);
    });
}


fixedFunction().catch((error) => console.error("Now the error is caught:", error));

在循环中使用async/await

        在循环中使用 ‘async/await‘ 时，可能会导致异步操作无法并行执行，从而降低性能。

示例

async function processItems(items) {
    for (let item of items) {
        await processItem(item); // 每次处理一个item，操作是串行的
    }
}

改进

        如果需要并行处理，可以使用 ‘Promise.all‘ 来优化：

async function processItems(items) {
    let promises = items.map(item => processItem(item));
    await Promise.all(promises); // 并行处理所有items
}

总结

        异步错误处理是编写健壮的 JavaScript 应用程序的核心技能之一。通过正确使用 ‘Promise‘ 的 ‘catch‘ 方法和 ‘async/await‘ 结合 ‘try...catch‘，你可以有效地捕获和处理异步操作中的错误，确保应用程序在出现问题时能够正确地应对。理解并掌握异步错误处理的最佳实践，能够帮助你编写出更稳定、更可靠的代码，为用户提供更加流畅的使用体验。同时，避免常见的陷阱，将帮助你避免难以调试和定位的错误。通过不断地练习和优化，异步编程将成为你处理复杂 JavaScript 任务的重要工具。