JavaScript 中 async/await 的用法？

推荐答案

// www.javascriptcn.com code example
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

本题详细解读

什么是 async/await？

async/await 是 JavaScript 中处理异步操作的一种语法糖，它基于 Promise，使得异步代码的编写和阅读更加直观和简洁。async 关键字用于声明一个异步函数，而 await 关键字用于等待一个 Promise 的解决（resolve）或拒绝（reject）。

async 函数

• async 函数是使用 async 关键字声明的函数。
• async 函数总是返回一个 Promise 对象。如果函数返回值不是一个 Promise，它会被自动包装成一个 resolved 的 Promise。
• 在 async 函数内部，可以使用 await 关键字来暂停函数的执行，直到等待的 Promise 被解决或拒绝。

await 表达式

• await 关键字只能在 async 函数内部使用。
• await 表达式会暂停 async 函数的执行，直到等待的 Promise 被解决（resolve）或拒绝（reject）。
• 如果 await 后面的表达式是一个 Promise，await 会返回 Promise 的解决值。如果 Promise 被拒绝，await 会抛出异常，可以通过 try/catch 来捕获。

错误处理

• 使用 try/catch 块可以捕获 await 表达式中的错误。
• 如果 await 后面的 Promise 被拒绝，控制权会立即转移到 catch 块中。

示例代码解析

// www.javascriptcn.com code example
async function fetchData() {
    try {
        // 等待 fetch 请求完成，返回的 response 是一个 Promise
        const response = await fetch('https://api.example.com/data');
        
        // 等待 response.json() 完成，返回的 data 是一个 Promise
        const data = await response.json();
        
        // 打印获取到的数据
        console.log(data);
    } catch (error) {
        // 捕获并处理错误
        console.error('Error fetching data:', error);
    }
}

// 调用异步函数
fetchData();

在这个示例中，fetchData 是一个 async 函数，它使用 await 来等待 fetch 请求和 response.json() 的完成。如果其中任何一个操作失败，catch 块会捕获错误并打印错误信息。