Vue axios 请求拦截器

前言

提示：项目中使用到的axios请求拦截器，在此仅仅是记录，以下附上全部代码。

---

1.引入axios

import axios from "axios";
import { MessageBox } from 'element-ui'  //可以不用，此处是使用elementUI 的弹框

2.设置请求基础路径

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

3.挂载请求拦截器

// request 拦截器
//挂载请求拦截器 (相当于请求的预验证，请求到达服务器之前先验证这次请求)
axios.interceptors.request.use(config => {
  //为请求头添加对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token");
  return config;
});

4.挂载响应拦截器

// response 拦截器
axios.interceptors.response.use(
  response => {
    const code = response.status;
    if (code == 504) {
      MessageBox.confirm("网络请求超时", "提示", {
        showCancelButton: false,
        type: "warning"
      });
      return Promise.reject(error);
    }
    if (code < 200 || code > 300) {
      MessageBox.confirm(response.message, "提示", {
        showCancelButton: false,
        type: "warning"
      });
      return Promise.reject("error");
    } else {
      // console.log(response.data, "拦截 请求的 response.data");
      if (response.data.status === -1) {
        let statusText = "";
        if (response.data.statusText) {
          if (response.data.statusText.indexOf(":") !== -1) {
            statusText = response.data.statusText.replace(":", "");
          }
        }
        if (statusText) {
          console.log(statusText, "44444");
          MessageBox.confirm(statusText, "提示", {
            showCancelButton: false,
            type: "warning"
          });
        } else {
          MessageBox.confirm(response.data.statusText, "提示", {
            showCancelButton: false,
            type: "warning"
          });
        }
        return Promise.reject(response.data);
      }
      return response;
    }
  },
  //响应错误拦截
  error => {
    let code = 0;
    try {
      code = error.response.status;
    } catch (e) {
      if (error.toString().indexOf("Error: timeout") !== -1) {
        MessageBox.confirm("网络请求超时", "提示", {
          showCancelButton: false,
          type: "warning"
        });
        return Promise.reject(error);
      }
      if (error.toString().indexOf("Error: Network Error") !== -1) {
        MessageBox.confirm("网络请求错误", "提示", {
          showCancelButton: false,
          type: "warning"
        });
        return Promise.reject(error);
      }
    }
    if (code === 401) {
      MessageBox.confirm("登录状态已过期，请重新登录", "系统提示", {
        confirmButtonText: "重新登录",
        showCancelButton: false,
        showClose: false,
        type: "warning"
      }).then(() => {
        // store.dispatch("LogOut").then(() => {
        //   location.reload(); // 为了重新实例化vue-router对象 避免bug
        // });
      });
    } else if (code === 403) {
      router.push({ path: "/401" });
    } else {
      const errorMsg = error.response.data.message;
      if (errorMsg !== undefined) {
        MessageBox.confirm(errorMsg, "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          showClose: false,
          type: "warning"
        });
      }
    }
    return Promise.reject(error);
  }
);
export default axios;

5.main.js中引入，挂载到vue原型上

// 引入具有拦截请求的axios
import xhrAxios from "./utils/xhrAxios";
Vue.prototype.$http = xhrAxios;

---

打包带走之前记得点赞啊！！！