【基础】vue项目对axios进行二次封装，request全局接口请求文件如何写？

搭建VUE项目时，需要考虑封装一个全局的接口请求文件，可以对登录进行拦截以及请求的拦截，还有对通用的状态错误码和异常进行处理，这样外部使用接口请求时代码会很简洁。

以下是在网上找到的一个封装接口文件的参考demo，是对axios库的二次封装：

import axios from "axios";
import { message } from "ant-design-vue";
import router from "../router";
/**
 * 提示函数
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = (msg) => {
  message({
    message: msg,
    duration: 1000,
  });
};

/**
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
  router.replace({
    path: "/login",
  });
};

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
});
// 设置post请求头
service.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    const token = localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  //请求成功
  (response) => {
    const res = response.data;
    if (res.code !== 200 && res.status !== 200) {
      return Promise.reject(res);
    } else {
      return res;
    }
  },
  //请求失败
  (error) => {
    const { response } = error;
    if (response) {
      // 请求已发出，但是不在30分钟的范围
      errorHandle(response.status, response.data.message);
      return Promise.reject(response);
    } else {
      // 处理断网的情况
      // eg:请求超时或断网时，更新state的network状态
      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
      // store.commit('changeNetwork', false);
    }
  }
);
/**
 * 请求失败后的错误统一处理
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status) => {
  // 状态码判断
  switch (status) {
    // 401: 未登录状态，跳转登录页
    case 401:
      toLogin();
      break;
    // 403 token过期
    // 清除token并跳转登录页
    case 403:
      localStorage.removeItem("token");
      message({
        message: "登录过期，请重新登录",
        callback: (action) => {
          console.log("action", action);
          toLogin();
        },
      });
      break;
    // 404请求不存在
    case 404:
      tip("请求的资源不存在");
      break;
  }
};
export default service;

以下是我们项目组实际使用的request文件，axios + antDesignVue组件库。

首先，需要在utils目录下新增一个request.js文件：

import Vue from "vue";
import store from "../store/demo";
import router from "../router";
import axios from "axios";
import { message } from "ant-design-vue";

const vm = new Vue({ store, router });
let baseURL = "";

const service = axios.create({
  baseURL: baseURL,
  timeout: 120000,
});

// 请求拦截
service.interceptors.request.use(
  (config) => {
    config.headers["Content-type"] = "application/json; charset=utf-8;";
    vm.$store.dispatch("global/setLoading", true);
    return config;
  },
  (error) => {
    console.log("error", error);
    return Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  (response) => {
    const status = response.status;
    const code = response.data.status || response.data.code;
    const res = response.data;
    vm.$store.dispatch("global/setLoading", false);
    if (status === 200) {
      // 处理登录失败
      const toLoginCode = ["00211", "00212"];
      if (toLoginCode.indexOf(code) !== -1) {
        sessionStorage.removeItem("token");
        router.push({ path: "/to-login" });
        return res;
      }
      // 处理成功
      const successCode = ["I0000", "I0001"];
      if (successCode.indexOf(code) !== -1) {
        return res;
      }
      // 处理失败
      const errCode = ["Err001", "Err002", "Err003"];
      if (errCode.indexOf(code) !== -1) {
        message.error(res.msg || "服务器异常，请稍后重试！");
      }
      return Promise.reject(res);
    } else {
      return Promise.reject(new Error(res.msg || "Error"));
    }
  },
  (error) => {
    vm.$store.dispatch("global/setLoading", false);
    let status;
    try {
      status.error.response.status;
    } catch (error) {
      status = 500;
    }
    message.error(`服务器异常，请稍后重试。当前状态码：${status}`);
    return Promise.reject(error);
  }
);

其次，需要在API目录下，新建一个如homeApi.js的文件：

// 引入刚刚创建的接口请求文件
import fetch from "../utils/request.js";  
// 全局请求的参数，如userId, token等，没有可忽略
import { public } from "@/api/public.config.js";
// 接口地址，判断测试、开发、生产
import { baseUrl } from "@/config/baseUrl.config.js";

export const login = (data)=>{
  fetch(url:`${baseUrl}/server/login`, method: 'post',data:{public: public(),private:data })
}

最后，页面上的具体使用实例：

// 引入用到的接口：
import { login } from ’@/api/homeApi‘

// 简单示例：
setLogin（）{
  login().then(res=>{
    console.log(res)
  })
}

//复杂示例：
setLogin（info）{
  const params = {
    userName: info
  }
  login(params ).then(res=>{
     console.log(res)
     // res.status === 'I0000' 是后端定义连接成功的状态码
     if(res.status === 'I0000'){
         const { list, total} = res
         this.list = list
    }
  })
}

项目中的二次封装具体进行了哪些操作？

默认配置有哪些

区分不同的环境（开发、测试、生产）
配置了不同的baseURL
timeout超时时间
默认的请求方法是get

请求拦截器（在发送请求之前做些什么，错误了做些什么）

添加接口请求时的全局loading事件，以及配置了header中的token

响应拦截器（对响应数据做点什么，错误了做些什么）

取消loading事件
对后端返回的错误代码进行分类处理
登录失败 跳转到重新登陆页面