Axios

Axios 自定义请求封装

import axios from "axios";
import router from "@/router/index";
import { Notification } from "element-ui";

const http = axios.create({
  baseURL: process.env.VUE_APP_API_URL, // 本地配置的代理，理论上可以不用baseURL
  timeout: 15000 // 请求超时时间
});

// 添加请求拦截器
http.interceptors.request.use(
  config => {
    // !!! 这里开始触发 loading 效果 !!!
    store.dispatch("SetLoading", true);
    // 请求时添加token
    // 设置 token header
    getToken() && (config.headers["token"] = token);
    // if (localStorage.token) config.headers.Authorization = `Bearer ${localStorage.token}`;
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  response => {
    // !!! 关闭 loading !!!
    store.dispatch("SetLoading", false);
    switch (response.data.code) {
      case "0":
        break;
      //token过期 拦截在消息抵达之前做点什么--，
      case "-5":
        axios.defaults.headers.common["token"] = "";
        var storage = window.localStorage;
        storage.clear();
        //  用户信息是否超时，重定向到登录页面
        router.replace("/login");
        Notification.error({
          title: "请求错误",
          message: "用户信息失效,请重新登陆"
        });
        return Promise.reject("用户信息失效,请重新登陆");
        break;
      //redis 超时
      case "-3":
        Notification.error({ title: "请求错误", message: "服务器连接超时" });
        return Promise.reject("服务器连接超时");
      default:
        Notification.error({
          title: "请求错误",
          message: response.data.message
        });
        break;
    }

    return response.data;
  },
  error => {
    // !!! 关闭 loading !!!
    store.dispatch("SetLoading", false);
    return Promise.reject(error);
  }
);

export default http;

axios 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

如果你想在稍后移除拦截器，可以这样：

var myInterceptor = axios.interceptors.request.use(function () {
  /*...*/
});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {
  /*...*/
});