当前位置：首页 > React

在react中如何封装axios

2026-01-25 13:32:02React

封装 Axios 的基本结构

创建一个独立的 axios 实例，配置基础 URL 和默认请求头。通常在 src/utils 或 src/api 目录下新建 http.js 文件：

import axios from 'axios';

const http = axios.create({
  baseURL: 'https://api.example.com', // 替换为实际 API 地址
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

请求拦截器

添加请求拦截器用于统一处理请求前的逻辑，例如添加认证 token：

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

响应拦截器

添加响应拦截器处理通用响应逻辑，例如错误状态码处理：

http.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.error('未授权');
          break;
        case 404:
          console.error('API 不存在');
          break;
        default:
          console.error('其他错误');
      }
    }
    return Promise.reject(error);
  }
);

封装通用请求方法

将常用的 HTTP 方法封装为统一接口：

export const get = (url, params) => http.get(url, { params });
export const post = (url, data) => http.post(url, data);
export const put = (url, data) => http.put(url, data);
export const del = url => http.delete(url);

类型支持（TypeScript）

为封装增加类型定义：

interface ResponseData<T> {
  code: number;
  data: T;
  message: string;
}

export const get = <T>(url: string, params?: any): Promise<ResponseData<T>> => 
  http.get(url, { params });

export const post = <T>(url: string, data?: any): Promise<ResponseData<T>> => 
  http.post(url, data);

使用示例

在组件中调用封装好的方法：

import { get, post } from '@/utils/http';

// 获取数据
const fetchData = async () => {
  try {
    const res = await get('/endpoint', { id: 1 });
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
};

// 提交数据
const submitData = async () => {
  try {
    const res = await post('/endpoint', { name: 'test' });
    console.log(res);
  } catch (err) {
    console.error(err);
  }
};

高级配置选项

可根据项目需求扩展更多配置：

// 取消请求功能
const CancelToken = axios.CancelToken;
let cancel;

http.get('/user', {
  cancelToken: new CancelToken(c => {
    cancel = c;
  })
});

// 取消请求
cancel();

这种封装方式提供了统一的错误处理、请求管理和类型支持，同时保持了 axios 的灵活性。根据实际项目需求，可以进一步扩展拦截器逻辑或添加更多辅助功能。

在react中如何封装axios