在React中使用Axios进行高级HTTP请求

在React中使用Axios进行高级HTTP请求时，主要涉及配置 Axios 实例、拦截器的使用、错误处理、并发请求以及请求和响应数据的转换。Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。通过配置 Axios 实例，我们可以设置基础URL、超时时间和默认头信息等。拦截器允许在请求或响应被 then 或 catch 处理之前对其进行拦截和修改。错误处理是确保能够优雅处理 API 请求失败的关键技巧。并发请求有助于同时处理多个HTTP请求，提高应用性能。请求和响应的数据转换功能，可让我们在数据发送到服务器前或将其传递给 then/catch 前对数据进行预处理。

拦截器的使用尤其重要，因为它可以在请求发送到服务器以及服务器响应返回到客户端的过程中提供一个中间处理层。例如，我们可以在请求拦截器中添加认证令牌，确保所有出去的请求都是认证过的；响应拦截器可以用来全局处理服务器返回的错误信息。

一、配置 AXIOS 实例

当在 React 应用中使用 Axios 发起 HTTP 请求时，可通过配置 Axios 实例来简化代码和增强复用性。

默认配置

首先，创建 Axios 实例时，可以通过 axios.create 方法指定默认配置，例如基础 URL 和超时限制。

import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例配置的优势

配置实例允许您预先定义请求的参数，这意味着每个请求都将自动带有这些设置，从而避免了重复代码。

二、使用拦截器

拦截器是 Axios 提供的一种强大功能，它们允许开发者在请求或响应被 then 或 catch 处理之前对它们进行截取并执行代码。

请求拦截器

在发送请求之前，可以使用请求拦截器添加额外的信息，例如在请求头中附加 token。

axiosInstance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  config.headers.Authorization = token ? `Bearer ${token}` : '';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

响应拦截器可以对返回的数据进行处理，或者在遇到错误时统一处理错误。

axiosInstance.interceptors.response.use(response => {
  // 对响应数据做些事情
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

三、错误处理

正确的错误处理不仅有助于应用的稳健性，同样为用户提供必要的反馈。

错误捕获

使用 catch 来捕获请求中可能出现的错误，并采取相应措施。

axiosInstance.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器回复了状态码 2xx 范围之外的状态信息
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但是没有收到任何回复
      console.log(error.request);
    } else {
      // 发生错误时正在设置请求
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

处理 HTTP 错误状态码

Axios 允许显式处理不同的 HTTP 错误状态码，例如通过错误的状态码提示不同的错误信息。

axiosInstance.interceptors.response.use(response => {
  return response;
}, error => {
  switch (error.response.status) {
    case 401:
      // 处理未授权的逻辑
      break;
    case 403:
      // 处理禁止访问的逻辑
      break;
    // 其他状态码相应处理
  }
  return Promise.reject(error);
});

四、并发请求

Axios 允许同时发送多个请求，并使用 axios.all 方法处理它们的响应。

发送并行请求

使用 axios.all 进行并行请求可以在所有请求都完成后一次性获取结果。

axios.all([
  axiosInstance.get('/user/12345'),
  axiosInstance.get('/user/54321')
])
.then(axios.spread((user1Response, user2Response) => {
  // 两个请求都完成时执行此代码块
  console.log(user1Response.data);
  console.log(user2Response.data);
}))
.catch(error => {
  // 处理错误情况
});

效率优势

并发请求特别适合需要多个API相互独立并且前端不需要按顺序解析的场景，能节省时间并且增加用户体验。

五、数据转换

Axios 允许在请求发送到服务器之前以及响应到达之后对数据进行转换。

请求数据的转换

在请求发送前，可以转换请求主体数据的格式。

axiosInstance.defaults.transformRequest = [function (data) {
  // 对 data 进行任意转换处理
  return data;
}];

响应数据的转换

在获取到响应后，可以转换响应数据的格式以便于处理。

axiosInstance.defaults.transformResponse = [function (data) {
  // 对 data 进行任意转换处理
  return data;
}];

格式化 JSON 数据

一般在转换响应数据时，会将 JSON 格式的响应主体转换为 JavaScript 对象，从而可以更方便地访问数据。

axiosInstance.interceptors.response.use(response => {
  try {
    // 尝试解析 JSON 数据
    response.data = JSON.parse(response.data);
  } catch (e) {
    // 如果不是 JSON 格式，不做变化
  }
  return response;
});

通过这样的高级配置和技巧，Axios 不仅强化了 React 应用与后端服务交互的能力，同时也提供了优雅处理流程、增强了代码的可读性和可维护性。