async/await 处理 Axios 请求

在现代 JavaScript 开发中，async 和 await 提供了一种更为简洁、直观的方式来处理异步操作。由于 Axios 是基于 Promise 的 HTTP 客户端，它与 async/await 能够很好地结合使用，使得异步请求代码更加简洁易读。

一、async 和 await 的基本用法

在函数前加上 async 关键字后，该函数就会自动返回一个 Promise。在该函数内部，可以使用 await 来等待一个异步操作（如 Axios 请求）完成，并返回结果。

语法结构

// 使用 async 声明一个异步函数
async function fetchData(url) {
  try {
    // 使用 await 等待 Axios 的 Promise 完成，并获取响应
    const response = await axios.get(url);
    
    // 请求成功后，处理返回的数据
    console.log(response.data);
  } catch (error) {
    // 请求失败时，捕获并处理错误
    console.error('请求失败:', error);
  }
}

关键点：

• async：用于声明异步函数，函数返回的是一个 Promise。
• await：用于暂停异步函数的执行，直到 Promise 解决（resolved），返回结果。
• try...catch：用于捕获可能在异步操作中抛出的错误，确保代码健壮性。

二、使用 async/await 发起 Axios 请求

示例：获取用户数据并处理响应

// 引入 Axios 库
import axios from 'axios';

// 定义一个异步函数，用于获取用户数据
async function getUserData(userId) {
  try {
    // 使用 await 等待 axios.get 请求完成
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    
    // 请求成功后，处理返回的数据
    const userData = response.data;
    console.log('用户数据:', userData);
    return userData; // 返回获取到的数据
  } catch (error) {
    // 捕获并处理请求错误
    console.error('获取用户数据失败:', error);
    throw error; // 重新抛出错误，以便调用者进一步处理
  }
}

// 调用异步函数并处理返回的 Promise
getUserData(123)
  .then((data) => {
    // 成功获取数据时的处理逻辑
    console.log('数据获取成功:', data);
  })
  .catch((error) => {
    // 获取数据失败时的处理逻辑
    console.error('数据获取失败:', error);
  });

关键点：

• axios.get(url)：发送一个 GET 请求，并返回一个 Promise。使用 await 可以暂停函数的执行，直到请求完成并返回结果。
• response.data：Axios 的响应对象中，data 字段包含服务器返回的主要内容。
• throw error：捕获到的错误重新抛出，以便调用者可以进一步处理错误。

三、Axios 响应对象结构

当 Axios 发起 HTTP 请求并接收到响应时，返回的响应对象结构通常如下：

{
  "data": { /* 服务器返回的主体内容 */ },
  "status": 200, // HTTP 状态码
  "statusText": "OK", // HTTP 状态文本
  "headers": { /* 服务器返回的响应头信息 */ },
  "config": { /* 请求时的配置信息 */ },
  "request": { /* 请求对象 */ }
}

重要字段说明：

• data：包含服务器返回的实际数据，通常是需要处理的主要信息。
• status：HTTP 状态码，例如 200 表示成功，404 表示资源未找到。
• headers：包含服务器返回的响应头信息，例如内容类型、缓存控制等。
• config：发送请求时的配置信息，例如请求 URL、请求方法、超时时间等。
• request：表示请求的相关信息。

为什么通常从 response.data 获取数据？

1. 数据所在位置：

   • 服务器返回的实际数据通常包含在 data 字段中。这个字段包含了服务器响应的主体内容。
   • 在大多数情况下，我们只关心从服务器接收到的数据，即 response.data。

2. 状态码和其他信息：

   • status、statusText、headers 等字段提供了关于请求的更多上下文信息，例如请求是否成功、服务器返回的状态等。
   • 这些信息可能会在处理错误或调试时用到，但通常不在正常数据处理中使用。

四、综合示例：多次请求处理

// 引入 Axios 库
import axios from 'axios';

// 定义一个异步函数，依次获取多个用户的数据
async function getMultipleUsers(userIds) {
  try {
    // 使用 Promise.all 并发请求多个用户数据
    const requests = userIds.map(id => axios.get(`https://api.example.com/users/${id}`));
    const responses = await Promise.all(requests); // 等待所有请求完成

    // 处理所有返回的数据
    const userDataArray = responses.map(response => response.data);
    console.log('所有用户数据:', userDataArray);
    return userDataArray; // 返回用户数据数组
  } catch (error) {
    // 捕获并处理任何一个请求的错误
    console.error('获取多个用户数据失败:', error);
    throw error;
  }
}

// 使用异步函数调用并处理结果
getMultipleUsers([1, 2, 3])
  .then((data) => {
    console.log('成功获取到所有用户数据:', data);
  })
  .catch((error) => {
    console.error('请求过程中出错:', error);
  });

关键点：

• Promise.all：并发处理多个请求，所有请求都完成后返回结果数组。
• 错误处理：即使是并发请求中的任何一个失败，都会进入 catch 块进行处理。

总结

• async/await 提供了更直观的方式来处理异步请求，代码结构更接近同步代码。
• 错误处理：在 async 函数中使用 try...catch 捕获并处理请求错误，使代码更健壮。
• 返回数据：通常直接从 response.data 获取服务器返回的主体内容，简化业务逻辑。

通过合理使用 async/await，你可以编写更清晰、易维护的异步请求代码，提高代码的可读性和开发效率。