白骑士的JavaScript教学进阶篇之异步编程 3.2.3 async/await

        在JavaScript的异步编程中，‘Promise‘ 极大地简化了处理异步操作的方式。然而，随着 ES2017 的发布，‘async/await‘ 被引入，进一步简化了异步代码的编写，使得异步操作可以用一种更为同步的方式表达。这种新的语法糖使得代码更具可读性，特别是在需要处理多个异步操作时。在本节中，我们将深入探讨 ‘async/await‘ 的概念、使用方法以及其在异步编程中的优势。

什么是async/await？

        ‘async/await‘ 是基于 ‘Promise‘ 的语法糖，提供了一种更简洁、更直观的方式来编写异步代码。通过 ‘async/await‘，我们可以将异步操作写得像同步操作一样，从而使代码更容易理解和调试。

• ‘async‘ 关键字用于声明一个函数为异步函数。异步函数总是返回一个 ‘Promise‘。
• ‘await‘ 关键字只能在异步函数中使用，它会暂停异步函数的执行，等待 ‘Promise‘ 解决，并返回结果。

使用 async 声明异步函数

        要使用 ‘await‘，首先需要将函数声明为 ‘async‘。一个 ‘async‘ 函数返回一个 ‘Promise‘，即使函数内部没有显式地返回 ‘Promise‘。

示例

async function fetchData() {
    return "Data fetched";
}

fetchData().then(data => console.log(data)); // 输出: Data fetched

        在这个示例中，‘fetchData‘ 是一个异步函数，它返回一个 ‘Promise‘。即使我们只是返回一个字符串，JavaScript 会自动将其包装成 ‘Promise‘。

使用 await 等待 Promise

        ‘await‘ 关键字用于暂停异步函数的执行，直到 ‘Promise‘ 解决，并返回 ‘Promise‘ 的结果。如果 ‘Promise‘ 被拒绝，‘await‘ 会抛出一个异常。

示例

function getPromise() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Promise resolved"), 1000);
    });
}


async function asyncFunction() {
    let result = await getPromise();
    console.log(result); // 输出: Promise resolved
}


asyncFunction();

        在这个示例中，‘await‘ 会暂停 ‘asyncFunction‘ 的执行，直到 ‘getPromise‘ 解决，并将其结果赋值给 ‘result‘ 变量。

async/await 的优势

更易读的代码

        使用 ‘async/await‘ 使得异步代码看起来像同步代码，极大地提高了代码的可读性，特别是在处理多个异步操作时。

示例：使用 async/await 简化 Promise 链

function fetchUserData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("User Data"), 1000);
    });
}


function fetchUserPosts() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("User Posts"), 1000);
    });
}


async function getUserInfo() {
    let userData = await fetchUserData();
    console.log(userData); // 输出: User Data

    let userPosts = await fetchUserPosts();
    console.log(userPosts); // 输出: User Posts
}


getUserInfo();

        在这个示例中，我们可以按顺序等待 ‘fetchUserData‘ 和 ‘fetchUserPosts‘ 的结果，并以同步的方式处理它们，而不是使用复杂的 ‘then‘ 链。

错误处理更简单

        ‘async/await‘ 使得错误处理更为直观。我们可以使用 ‘try...catch‘ 来捕获 ‘await‘ 操作中的错误，就像处理同步代码中的异常一样。

示例：错误处理

function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject("Fetch error"), 1000);
    });
}


async function fetchData() {
    try {
        let data = await fetchDataWithError();
        console.log(data);
    } 

    catch (error) {
        console.error("Error:", error); // 输出: Error: Fetch error
    }
}


fetchData();

        在这个示例中，我们使用 ‘try...catch‘ 来捕获 ‘fetchDataWithError‘ 中的错误，并输出错误消息。

处理并发操作

        尽管 ‘async/await‘ 是按顺序执行异步操作的好方法，但有时我们希望同时启动多个异步操作并等待它们全部完成。这种情况下，我们可以结合使用 ‘Promise.all‘ 和 ‘await‘。

示例：并发处理

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Data 1"), 1000);
    });
}


function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Data 2"), 2000);
    });
}


async function fetchAllData() {
    let [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);

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


fetchAllData();

        在这个示例中，我们使用 ‘Promise.all‘ 并行地执行 ‘fetchData1‘ 和 ‘fetchData2‘，并等待它们都完成后再处理结果。这样可以节省时间，提高性能。

总结

        ‘async/await‘ 是JavaScript异步编程中的一个重要工具，它通过简化异步代码的写法，提高了代码的可读性和可维护性。在许多场景下，‘async/await‘ 是替代 ‘Promise‘ 链式调用的最佳选择，特别是在需要处理复杂的异步逻辑或错误时。尽管 ‘async/await‘ 已成为处理异步操作的主流方式，但了解其背后的 ‘Promise‘ 机制仍然非常重要。通过结合 ‘Promise‘、‘async/await‘ 和其他异步编程技术，你可以更好地编写高效、健壮的JavaScript代码，为现代Web应用提供强大的支持。