react中axios的完整封装

在 React 中使用 Axios 库发送 HTTP 请求时，我们可以将其封装成一个独立的模块，方便在项目中复用。

完整的 Axios 封装示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 可以在这里添加 token 等请求头信息
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

上述代码中，我们首先通过 `axios.create()` 方法创建一个 Axios 实例，设置了请求的基础 URL、超时时间和请求头信息。然后，我们添加了请求拦截器和响应拦截器，对请求和响应进行处理。最后，我们将该实例导出，供其他模块使用。

在其他模块中，我们可以直接导入该 Axios 实例，并调用其相应的方法来发送 HTTP 请求：

import axios from './axios';

axios.get('/user')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

这样，我们就实现了 Axios 的完整封装，方便在 React 项目中复用。