axios

1. axios 是什么

axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。

2. 为什么要封装

在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括：

  • 统一配置：集中管理请求基地址、超时时间等公共配置；
  • 统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）；
  • 简化调用：封装通用的请求方法（如get/post），减少重复代码；
  • 统一规范：约束接口请求的参数格式、响应处理逻辑。

3. 如何封装（Vue2 中）

以下是 Vue2 中 axios 的典型封装步骤：

（1）创建 axios 实例并配置公共参数

1
2
3
4
5
6
7
8
// src/utils/request.js
import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基地址（从环境变量读取）
  timeout: 5000 // 超时时间
});

（2）添加请求拦截器（处理请求前逻辑）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 请求拦截器
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);
  }
);

（3）添加响应拦截器（处理响应后逻辑）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 示例：统一处理响应数据
    const res = response.data;
    if (res.code !== 200) { // 假设接口约定code=200为成功
      // 处理业务错误（如提示错误信息）
      console.error(res.msg);
      return Promise.reject(new Error(res.msg || '请求失败'));
    } else {
      return res;
    }
  },
  error => {
    // 处理HTTP错误（如401登录失效）
    if (error.response.status === 401) {
      // 示例：跳转到登录页
      window.location.href = '/login';
    }
    console.error('接口请求错误：', error.message);
    return Promise.reject(error);
  }
);

（4）封装请求方法并导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 封装get请求
export const get = (url, params) => {
  return service({
    url,
    method: 'get',
    params
  });
};

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

export default service;

（5）在 Vue 中使用

1
2
3
4
5
6
7
// 在组件/接口文件中引入
import { get, post } from '@/utils/request';

// 调用示例
get('/user/list', { page: 1 }).then(res => {
  console.log('用户列表：', res.data);
});