JS Axios二次封装：提升开发效率的利器

2025-12-30 9644阅读

在前端开发中，Axios是一个非常流行的HTTP客户端库。它可以帮助我们轻松地与后端API进行交互。然而，在实际项目中，我们可能需要对Axios进行二次封装，以满足项目的特定需求。本文将介绍如何对Axios进行二次封装，并提供一些实用的技巧和示例。

为什么要进行二次封装

统一配置：可以统一设置请求的基础URL、超时时间、请求头（如认证信息）等，避免在每个请求中重复设置。
错误处理：集中处理请求过程中的错误，如网络错误、服务器错误等，提供更友好的用户反馈。
拦截器：利用请求拦截器和响应拦截器，在请求发送前和响应返回后进行一些通用的操作，如添加加载动画、处理token刷新等。

二次封装的步骤

1. 安装Axios

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

npm install axios

2. 创建封装文件

在项目中创建一个专门用于封装Axios的文件，例如api.js。

3. 基本配置

在api.js中，进行一些基本的配置：

import axios from 'axios';

// 创建Axios实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 基础URL
  timeout: 5000, // 超时时间（毫秒）
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头，如token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可以在这里处理成功响应，如提取数据
    return response.data;
  },
  error => {
    // 处理错误响应
    console.error('请求错误:', error);
    // 可以根据错误状态码进行不同处理
    if (error.response.status === 401) {
      // 处理未授权情况，如跳转到登录页
    }
    return Promise.reject(error);
  }
);

export default service;

4. 封装请求方法

在api.js中，封装常用的请求方法，如get、post等：

// 封装get请求
export const getRequest = (url, params = {}) => {
  return service({
    method: 'get',
    url,
    params,
  });
};

// 封装post请求
export const postRequest = (url, data = {}) => {
  return service({
    method: 'post',
    url,
    data,
  });
};

使用封装后的Axios

在其他组件中，使用封装后的Axios：

import { getRequest, postRequest } from './api';

// 发送get请求
getRequest('/users', { id: 1 })
 .then(response => {
    console.log('获取用户成功:', response);
  })
 .catch(error => {
    console.error('获取用户失败:', error);
  });

// 发送post请求
postRequest('/login', { username: 'user', password: 'pass' })
 .then(response => {
    console.log('登录成功:', response);
  })
 .catch(error => {
    console.error('登录失败:', error);
  });