Axios封装实战：Vue2高效HTTP请求

什么是Axios？

Axios是一个基于Promise的HTTP客户端库，专门用于浏览器和Node.js环境。它具有同构特性，意味着同一套代码可以在浏览器和Node.js中运行------在服务端使用原生Node.js http模块，在客户端使用XMLHttpRequests。

Axios核心特性

‌Promise API支持‌：使用Promise管理异步请求，告别传统callback方式
‌请求/响应拦截器‌：在请求发送前和响应返回后进行统一处理
‌自动JSON转换‌：自动将请求和响应数据转换为JSON格式
‌取消请求功能‌：支持取消正在进行的请求
‌XSRF防御‌：客户端支持跨站请求伪造防御
‌并发请求处理‌：支持多个并行请求的统一管理

在Vue项目中，合理封装Axios能够统一处理请求配置、错误处理和权限验证，大幅提升开发效率和代码可维护性。

Vue2中的Axios封装

1. 基础安装与配置

首先安装Axios依赖：

javascript 复制代码

npm install axios -S

2. 创建Axios实例

在src/api/axios.js中创建配置化的Axios实例：

javascript 复制代码

import axios from 'axios';

// 创建Axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // API基础地址
  timeout: 5000, // 请求超时时间
  headers: {
    'X-Custom-Header': 'foobar'
  }
});

3. 拦截器配置

‌请求拦截器‌用于在发送请求前统一处理配置：

javascript 复制代码

// 请求拦截器
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);
  }
);

‌响应拦截器‌用于统一处理服务器返回的数据：

javascript 复制代码

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做统一处理
    return response.data;
  },
  error => {
    // 统一错误处理
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未授权，跳转登录页
          router.push('/login');
          break;
        case 404:
          console.error('请求的资源不存在');
          break;
        default:
          console.error('请求失败', error.response.data);
      }
    }
    return Promise.reject(error);
  }
);

4. API接口统一管理

在src/api/index.js中统一管理所有接口：

javascript 复制代码

import service from './axios';

// 用户相关接口
export const userAPI = {
  // 用户登录
  login: (data) => service.post('/user/login', data),
  
  // 获取用户信息
  getUserInfo: (id) => service.get(`/user/${id}`),
  
  // 更新用户信息
  updateUser: (id, data) => service.put(`/user/${id}`, data),
  
  // 删除用户
  deleteUser: (id) => service.delete(`/user/${id}`)
};

// 文章相关接口
export const articleAPI = {
  getList: (params) => service.get('/articles', { params }),
  create: (data) => service.post('/articles', data),
  update: (id, data) => service.patch(`/articles/${id}`, data)
};

5. 在Vue2组件中

javascript 复制代码

import { userAPI, articleAPI } from '@/api';

export default {
  data() {
    return {
      userInfo: null,
      articles: []
    };
  },
  methods: {
    async login() {
      try {
        const result = await userAPI.login({
          username: 'admin',
          password: '123456'
        });
        this.userInfo = result.data;
      } catch (error) {
        console.error('登录失败', error);
      }
    },
    
    async loadArticles() {
      const result = await articleAPI.getList({
        page: 1,
        limit: 10
      });
      this.articles = result.data;
    }
  },
  mounted() {
    this.loadArticles();
  }
};