当前位置：首页 > React

react如何封装axios

2026-02-12 00:13:23React

封装axios的基本步骤

在React中封装axios可以提高代码复用性、统一错误处理和请求配置。以下是一个常见的封装方法：

创建独立的axios实例文件（如api.js）：

import axios from 'axios';

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

请求拦截器处理

添加请求拦截器用于统一处理token等认证信息：

react如何封装axios

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

响应拦截器处理

添加响应拦截器统一处理响应数据和错误：

instance.interceptors.response.use(
  response => {
    if (response.data.code === 200) {
      return response.data;
    }
    return Promise.reject(response.data);
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权
          break;
        case 404:
          // 处理未找到
          break;
        default:
          console.error('请求错误');
      }
    }
    return Promise.reject(error);
  }
);

封装常用请求方法

封装GET、POST等常用方法：

react如何封装axios

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

使用示例

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

import { get, post } from './api';

// GET请求
get('/users', { page: 1 })
  .then(data => console.log(data))
  .catch(err => console.error(err));

// POST请求
post('/login', { username, password })
  .then(data => console.log(data))
  .catch(err => console.error(err));

高级配置选项

可添加更多自定义配置：

export const request = (options) => {
  return instance({
    method: options.method || 'get',
    url: options.url,
    params: options.params,
    data: options.data,
    ...options.config
  });
};

类型安全（TypeScript）

使用TypeScript增加类型定义：

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

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

这种封装方式提供了统一的错误处理、请求配置和响应处理，使项目中的HTTP请求更加规范且易于维护。