async/await语法
async/await 是 JavaScript 中用于处理异步操作的语法，它简化了 Promise 的使用，使得异步代码更加易读和易写。
具体来说，async/await 是通过在函数前面加上 async 关键字来声明一个异步函数，该函数内部可以使用 await 关键字来等待一个 Promise 对象的解析。当遇到 await 关键字时，函数会暂停执行，直到 Promise 对象的状态变为 resolved（解析）或 rejected（拒绝），然后继续执行后续代码。使用 await 关键字可以避免回调地狱（callback hell）的问题，使得异步代码更加清晰和可读。
案例
案例一
下面是一个示例代码，演示了如何使用 async/await 处理异步操作：
// 定义一个异步函数 async function fetchData() { try { // 使用 await 关键字等待一个 Promise 对象的解析 const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } // 调用异步函数 fetchData();
在上述代码中，fetchData 函数使用 await 关键字等待 fetch 方法返回的 Promise 对象的解析。一旦 Promise 对象被解析，就可以通过 response.json() 方法获取响应的 JSON 数据。如果出现错误，可以通过 catch 块捕获并处理异常。
案例二
下面是一个使用 async/await 处理异步操作的示例代码
// 异步函数，模拟从 API 获取用户信息 async function getUserInfo(userId) { try { // 发起网络请求，获取用户信息 const response = await fetch(`https://api.example.com/users/${userId}`); // 检查网络请求的状态码 if (!response.ok) { throw new Error('Failed to get user info'); } // 解析响应的 JSON 数据 const data = await response.json(); // 返回用户信息 return data; } catch (error) { console.error('Error:', error); throw new Error('Failed to get user info'); } } // 异步函数，模拟从 API 获取用户的订单信息 async function getUserOrders(userId) { try { // 发起网络请求，获取用户订单信息 const response = await fetch(`https://api.example.com/users/${userId}/orders`); // 检查网络请求的状态码 if (!response.ok) { throw new Error('Failed to get user orders'); } // 解析响应的 JSON 数据 const data = await response.json(); // 返回用户订单信息 return data; } catch (error) { console.error('Error:', error); throw new Error('Failed to get user orders'); } } // 主函数，调用异步函数并处理结果 async function main() { try { const userId = 123; // 调用 getUserInfo 函数获取用户信息 const userInfo = await getUserInfo(userId); console.log('User Info:', userInfo); // 调用 getUserOrders 函数获取用户订单信息 const userOrders = await getUserOrders(userId); console.log('User Orders:', userOrders); } catch (error) { console.error('Error:', error); } } // 调用主函数 main();
- 在异步函数内部，我们添加了对网络请求的状态码的检查。如果状态码不是 200，表示请求失败，我们会抛出一个错误。
- 在捕获错误的 catch 块中，我们打印错误信息，并重新抛出一个新的错误。这样做可以提供更具体的错误信息，并将错误传递给上层调用者。
- 在主函数中，我们调用了 getUserInfo 和 getUserOrders 函数，并使用 await 关键字等待它们的结果。如果发生错误，我们会打印错误信息。
运行上述代码可能的结果如下：
User Info: { id: 123, name: 'John Doe', email: 'john.doe@example.com' } User Orders: [ { id: 1, product: 'Product A', price: 10 }, { id: 2, product: 'Product B', price: 20 } ]
解释这个结果如下：
- 首先，调用 getUserInfo 函数来获取用户信息。在这个示例中，我们假设用户的 ID 是 123。根据 API 的响应，用户的信息被解析为一个包含 id、name 和 email 属性的对象。所以，User Info 的结果是 { id: 123, name: 'John Doe', email: 'john.doe@example.com' }。
- 接下来，调用 getUserOrders 函数来获取用户的订单信息。同样地，我们假设用户的 ID 是 123。根据 API 的响应，用户的订单信息被解析为一个包含多个订单对象的数组。每个订单对象具有 id、product 和 price 属性。所以，User Orders 的结果是一个包含订单对象的数组：[ { id: 1, product: 'Product A', price: 10 }, { id: 2, product: 'Product B', price: 20 } ]。
总结
使用 async/await 可以使异步代码更加简洁和易于理解。它的优点包括：
- 更直观的代码流程：通过使用 await 关键字，代码的执行流程更接近同步代码，易于理解和调试。
- 错误处理更方便：可以使用 try/catch 块来捕获异步操作中的错误，使得错误处理更加直观和简单。
- 可以使用同步的编程风格：通过使用 async/await，可以使用类似同步代码的编程风格，而不需要嵌套多层回调函数。
总之，async/await 是 JavaScript 中处理异步操作的一种优雅的方式，它使得异步代码更易于编写和维护，提高了代码的可读性和可维护性。
