如何有效使用Async Await来优化JavaScript异步代码？

深入理解 JavaScript 中的async 和await

JavaScript 的async 和await 是用于处理异步操作的语法糖，它们使得编写异步代码更加直观和易读，本文将详细探讨这两个关键字的用法、原理及其在实际项目中的应用。

什么是async 和await？

async 函数

定义：使用async 关键字声明的函数称为异步函数。

返回值：异步函数总是隐式地返回一个Promise 对象。

错误处理：如果在异步函数内部抛出异常，这个异常会被封装到一个被拒绝的Promise 中。

async function myAsyncFunction() {
    // Some asynchronous code here
}

await 表达式

定义：await 关键字只能在标记为async 的函数内部使用。

作用：await 会暂停执行当前函数，直到其右侧的 Promise 完成（resolved）或失败（rejected），并返回该 Promise 的结果。

错误处理：如果await 的 Promise 被拒绝，则会抛出相应的错误。

async function myAsyncFunction() {
    try {
        let result = await someAsyncOperation();
        console.log(result);
    } catch (error) {
        console.error('Error:', error);
    }
}

示例与应用场景

基本示例

以下是一个简单的例子，展示了如何使用async 和await 来处理异步操作。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 2000);
    });
}
async function displayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Failed to fetch data:", error);
    }
}
displayData();

在这个例子中，fetchData 是一个返回 Promise 的函数，模拟了一个异步数据获取过程。displayData 是一个异步函数，通过await 等待fetchData 完成，并打印结果。

多个异步操作

当需要顺序执行多个异步操作时，async 和await 非常有用，假设我们需要按顺序执行三个异步任务：

async function executeTasks() {
    try {
        const result1 = await task1();
        const result2 = await task2();
        const result3 = await task3();
        console.log(result1, result2, result3);
    } catch (error) {
        console.error("An error occurred:", error);
    }
}

通过这种方式，可以确保每个任务在前一个任务完成后才开始执行。

并行执行异步操作

有时候我们希望并行执行多个异步操作，可以使用Promise.all 来实现：

async function executeParallelTasks() {
    try {
        const [result1, result2] = await Promise.all([task1(), task2()]);
        console.log(result1, result2);
    } catch (error) {
        console.error("An error occurred:", error);
    }
}

错误处理与边界情况

错误传播

在异步函数中，错误可以通过throw 关键字抛出，并通过try...catch 块进行捕获：

async function faultyFunction() {
    throw new Error("Something went wrong!");
}
async function handleError() {
    try {
        await faultyFunction();
    } catch (error) {
        console.error("Caught an error:", error);
    }
}

边界情况处理

在某些情况下，可能需要处理特定的边界情况，当某个 API 调用超时时：

async function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(id);
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
    } catch (error) {
        throw new Error(Fetch error: ${error.message});
    }
}

性能优化与最佳实践

避免阻塞主线程

尽管async 和await 使异步代码更易于编写，但仍需注意不要在主线程上执行耗时的操作，以免影响用户体验，可以将繁重的任务放到 Web Worker 中执行。

合理使用try...catch

在使用async 和await 时，应始终使用try...catch 块来捕获可能的错误，以防止未处理的异常导致整个应用程序崩溃。

使用默认参数和可选链操作符

结合默认参数和可选链操作符（?.），可以使代码更加健壮：

async function getUserData(userId = 'defaultUserId') {
    const user = await fetchUser(userId);
    return user?.data;
}

相关问题与解答栏目

问题 1：如何在async 函数中同时处理多个异步操作？

解答：可以使用Promise.all 方法来同时处理多个异步操作，以下是一个示例：

async function handleMultipleTasks() {
    try {
        const [result1, result2] = await Promise.all([task1(), task2()]);
        console.log(result1, result2);
    } catch (error) {
        console.error("An error occurred:", error);
    }
}

问题 2：如何在async 函数中处理超时？

解答：可以使用AbortController 和setTimeout 来实现超时控制，以下是一个示例：

async function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(id);
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
    } catch (error) {
        throw new Error(Fetch error: ${error.message});
    }
}

小伙伴们，上文介绍了“async await js”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。