🎉🎉🎉一文全面了解：react-antd-admin 如何封装 axios🎉🎉🎉一个神奇的 react 后台

在React中封装Axios并添加请求拦截、响应拦截和错误处理是一个常见的需求，可以通过创建一个包装的Axios实例来实现。以下是一个简单的示例，展示如何在React中封装Axios：

首先，确保你已经安装了Axios，如果没有安装，可以使用以下命令进行安装：

npm install axios

然后，你可以创建一个独立的Axios实例，并在该实例上添加请求拦截器、响应拦截器以及错误处理。下面是一个示例：

import axios from 'axios';

// 创建一个独立的Axios实例
const instance = axios.create({
  baseURL: '/api', // 你的API基本URL
  timeout: 5000, // 请求超时时间（毫秒）
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送前可以在这里进行一些处理，例如添加请求头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在这里对响应数据进行处理，然后将数据返回
    return response.data;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      const status = error.response.status;
      const data = error.response.data;

      // 根据HTTP状态码处理不同的错误情况
      switch (status) {
        case 401: // 未授权错误
          // 处理未授权错误，例如跳转到登录页面
          break;
        case 403: // 禁止访问错误
          // 处理禁止访问错误
          break;
        case 404: // 未找到错误
          // 处理未找到错误
          break;
        default:
          // 处理其他HTTP错误
          console.error('HTTP Error', status, data);
          break;
      }
    } else if (error.request) {
      // 处理请求被发出，但没有收到响应的情况
      console.error('No response received', error.request);
    } else {
      // 处理请求无法发送的情况
      console.error('Error', error.message);
    }

    return Promise.reject(error);
  }
);

export default instance; // 导出封装好的Axios实例

现在，你可以在你的React应用中导入这个封装好的Axios实例，并使用它来发送请求。例如：

import React, { useEffect } from 'react';
import axiosInstance from './axiosInstance'; // 导入封装好的Axios实例

function App() {
  useEffect(() => {
    // 发送GET请求
    axiosInstance.get('/data')
      .then((response) => {
        // 处理响应数据
        console.log(response);
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
  }, []);

  return (
    <div className="App">
      {/* 界面内容 */}
    </div>
  );
}

export default App;

通过这种方式，你可以在React应用中轻松地管理Axios请求的拦截、响应处理和错误处理。根据需要，你可以根据不同的HTTP状态码或其他条件来自定义错误处理逻辑。

react-antd-admin 是这样封装的

import { message } from 'antd';
import axios from 'axios';
import { EErrorCode } from './code';
import { getItem, removeItem } from '@/utils/storage';
const request = axios.create({
  baseURL: '/api', // 替换为你的API基本URL
  timeout: 5000, // 请求超时时间（毫秒）
});

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 在请求发送前可以在这里进行一些处理，例如添加请求头
    config.headers.Authorization = `Bearer ${getItem('token')}`;
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 在这里对响应数据进行处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      const status = error.response.status;
      const data = error.response.data;

      switch (status) {
        case EErrorCode.REQUEST_ERROR:
          message.error('请求错误')
          break
        case EErrorCode.TOKEN_EXPIRED:
          message.error('Token过期，请重新登录').then(() => {
            removeItem('token')
            removeItem('isLogin')
            removeItem('username')
          }).then(() => {
            window.location.href = '/login'
          })
          break
        case EErrorCode.ACCESS_DENY:
          message.error('拒绝访问')
          break
        case EErrorCode.NOT_FOUND:
          message.error(`请求地址出错: ${error.response.config.url}`)
          break
        case EErrorCode.SERVER_INTER_ERROR:
          message.error('服务器内部错误')
          break
        case EErrorCode.SERVICE_NOT_IMPLEMENT:
          message.error('服务未实现')
          break
        case EErrorCode.GATEWAY_ERROR:
          message.error('网关错误')
          break
        case EErrorCode.SERVICE_UNAVAILABLE:
          message.error('服务不可用')
          break
        case EErrorCode.GATEWAY_TIMEOUT:
          message.error('网关超时')
          break
        case EErrorCode.HTTP_NOT_SUPPORT:
          message.error('HTTP版本不受支持')
          break
        default:
          // 处理其他HTTP错误
          console.error('HTTP Error', status, data);
          break
      }
    } else if (error.request) {
      // 如果请求被发出，但没有收到响应
      console.error('No response received', error.request);
    } else {
      // 发生了错误，请求无法发送
      console.error('Error', error.message);
    }

    return Promise.reject(error);
  }
);

export default request;