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: '[email protected]' }
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: '[email protected]' }。
接下来，调用 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 中处理异步操作的一种优雅的方式，它使得异步代码更易于编写和维护，提高了代码的可读性和可维护性。

async/await语法

async/await语法

案例

案例一

案例二

总结

猜你喜欢