async/await语法

女爷i 2024-03-08 08:01 52阅读 0赞

## 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();

1.  在异步函数内部，我们添加了对网络请求的状态码的检查。如果状态码不是 200，表示请求失败，我们会抛出一个错误。
2.  在捕获错误的 `catch` 块中，我们打印错误信息，并重新抛出一个新的错误。这样做可以提供更具体的错误信息，并将错误传递给上层调用者。
3.  在主函数中，我们调用了 `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 } ]

解释这个结果如下：

1.  首先，调用 `getUserInfo` 函数来获取用户信息。在这个示例中，我们假设用户的 ID 是 123。根据 API 的响应，用户的信息被解析为一个包含 `id`、`name` 和 `email` 属性的对象。所以，`User Info` 的结果是 `{ id: 123, name: 'John Doe', email: 'john.doe@example.com' }`。
2.  接下来，调用 `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 可以使异步代码更加简洁和易于理解。它的优点包括：

1.  更直观的代码流程：通过使用 `await` 关键字，代码的执行流程更接近同步代码，易于理解和调试。
2.  错误处理更方便：可以使用 `try/catch` 块来捕获异步操作中的错误，使得错误处理更加直观和简单。
3.  可以使用同步的编程风格：通过使用 async/await，可以使用类似同步代码的编程风格，而不需要嵌套多层回调函数。

总之，async/await 是 JavaScript 中处理异步操作的一种优雅的方式，它使得异步代码更易于编写和维护，提高了代码的可读性和可维护性。