React 全局封装 Axios 请求库 - 简化 HTTP 操作 - 常规

在 React 中使用 Axios 进行全局封装，可以方便地发送 HTTP 请求。以下是一种可能的实现方式：

安装 Axios 和相关依赖：

npm install axios --save
npm install qs --save

创建一个 request.js 文件，用于全局封装 Axios 请求：

import axios from 'axios';
import qs from 'qs';

axios.defaults.baseURL = 'http://localhost:8080'; // 设置请求的默认根路径
axios.defaults.timeout = 5000; // 设置请求超时时间

// 请求拦截器
axios.interceptors.request.use(config => {
  // 可以在这里添加一些请求头等信息
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  config.headers['Authorization'] = localStorage.getItem('token');
  config.data = qs.stringify(config.data);
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 可以在这里对响应进行一些处理
  if (response.data.code === 401) {
    localStorage.removeItem('token');
    window.location.href = '/login';
  }
  return response.data;
}, error => {
  return Promise.reject(error);
});

export default axios;

在这个文件中，我们对 Axios 进行了一些全局配置，包括默认的请求根路径、请求超时时间、请求拦截器和响应拦截器等。

在请求拦截器中，我们添加了一些请求头信息，将请求数据格式化为 URL 编码的形式。

在响应拦截器中，我们对响应进行了一些处理，例如在响应状态码为 401 时，清除本地存储的 token 并跳转到登录页面。

在需要发送 HTTP 请求的组件中引入 request.js 文件：

import request from './request';

class MyComponent extends React.Component {
  fetchData() {
    request.get('/api/data')
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        // 处理请求错误
      });
  }
}

在这个组件中，我们直接使用 request.get 或 request.post 等方法发送 HTTP 请求，而不需要每次都重新配置 Axios。如果需要添加一些特殊的请求头或请求参数，可以在调用 request.get 或 request.post 时传递第二个参数。例如：

request.post('/api/login', {username: 'admin', password: '123456'}, {
  headers: {'Content-Type': 'application/json'}
});

这里我们在请求体中传递了用户名和密码，并指定了请求头类型为 JSON 格式。