当前位置：首页 > React

react如何封装axios

2026-01-23 20:12:19React

封装 Axios 在 React 中的实现方法

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

创建 Axios 实例

import axios from 'axios';

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

添加请求拦截器

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('未授权');
          break;
        case 404:
          console.error('资源不存在');
          break;
        default:
          console.error('服务器错误');
      }
    }
    return Promise.reject(error);
  }
);

封装常用请求方法

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

在组件中使用封装后的方法

import { http } from './api';

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

// 提交数据
const submitData = async data => {
  try {
    const response = await http.post('/users', data);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

封装为自定义 Hook

import { useState } from 'react';
import { http } from './api';

export const useHttp = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const request = async (method, url, data = null) => {
    setLoading(true);
    try {
      const response = await http[method](url, data);
      setLoading(false);
      return response;
    } catch (err) {
      setError(err);
      setLoading(false);
      throw err;
    }
  };

  return { loading, error, request };
};

使用自定义 Hook

const { loading, error, request } = useHttp();

const fetchUsers = async () => {
  const users = await request('get', '/users');
  console.log(users);
};

const createUser = async userData => {
  const newUser = await request('post', '/users', userData);
  console.log(newUser);
};