axios在vue中的二次封装_vue3 axios的二次封装

概览

在 Vue 开发中，我们经常使用 axios 插件来进行数据的请求和提交。在企业级的 Vue 开发中，axios 插件的使用频率很高，每次请求都需要进行一些常见的操作，比如传递请求头、传递 Cookie、在请求头中传递登录信息等。如果不对 axios 进行进一步封装，就需要重复编写添加请求头和传递特殊数据的代码，这样非常浪费时间。

在日常的企业级开发中，通常会将 axios 的函数进行封装，提取为一个函数，以进行一些统一的操作。

同时，HTTP 请求可以分为请求头和响应头，在 axios 中两者都可以添加进一步的操作和拦截。我们的封装就是处理这些操作的。

axios的进一步封装

在 Vue 项目中，通常会创建一个 utils 文件夹来存放一些工具函数，比如时间格式化函数、表单校验函数等。

首先，我们创建一个名为 request.js 的文件。

当然，你也可以结合 Vuex 进行使用。

import axios from "axios";  // 引入 axios 函数

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时是否传递 cookie
  timeout: 5000 // 请求超时时间
});

// 在发送请求时的请求头处理函数
service.interceptors.request.use(
  config => {
     // 在此处对 config 进行处理，即发送请求前的操作
     // 例如
     config.headers['authKey'] = token; // 在请求头中添加 authKey 属性并赋值
     return config;
  },
  error => {
    // 请求失败时的处理
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 在返回数据时的响应头处理函数
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) { // 成功的 code 码一般是 200，当然 code 字段不一定存在，这里处理请求失败的操作
      // 可以使用提示框进行消息提示
      // 例如使用 alert
      alert(res.msg); // msg 为后台返回的错误信息
      // 在这里还可以进行登录权限的校验
      if (res.code === 401) {
        // 用户无权限可以进行进一步操作，比如超时退出等等
      }
      return Promise.reject(new Error(res.msg || 'Error'));
    } else {
      // 返回正常的请求数据
      return res;
    }
  },
  error => {
    // 错误处理函数
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

// 最后将 service 进行导出
export default service;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51