当前位置：首页 > React

react如何封装axios

2026-03-31 03:20:47React

封装 Axios 的步骤

在 React 中封装 Axios 可以简化 HTTP 请求的调用，统一处理错误和配置。以下是一个常见的封装方法。

创建 Axios 实例

创建一个自定义的 Axios 实例，设置默认配置，如基础 URL、超时时间和请求头。

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) => {
    return Promise.reject(error);
  }
);

添加响应拦截器

在响应返回时，可以统一处理错误和数据格式。

instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.error('Unauthorized');
          break;
        case 404:
          console.error('Not Found');
          break;
        default:
          console.error('Server Error');
      }
    }
    return Promise.reject(error);
  }
);

封装 HTTP 请求方法

将常用的 HTTP 方法（GET、POST、PUT、DELETE）封装为函数，方便调用。

react如何封装axios

export const get = (url, params) => {
  return instance.get(url, { params });
};

export const post = (url, data) => {
  return instance.post(url, data);
};

export const put = (url, data) => {
  return instance.put(url, data);
};

export const del = (url) => {
  return instance.delete(url);
};

使用封装的 Axios

在组件中直接调用封装好的方法，避免重复代码。

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

const fetchData = async () => {
  try {
    const response = await get('/users');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

const createUser = async (userData) => {
  try {
    const response = await post('/users', userData);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

统一导出 API

将所有 API 请求集中管理，便于维护和调用。

export const fetchUsers = () => get('/users');
export const createUser = (data) => post('/users', data);
export const updateUser = (id, data) => put(`/users/${id}`, data);
export const deleteUser = (id) => del(`/users/${id}`);