dy-admin-manager/src/utils/request.js

import ElementUI from "element-ui";
import axios from "axios";
import { Message } from "element-ui";
import store from "@/store";
import { getToken, removeToken, setToken } from "@/utils/auth";
import cleanDeep from "clean-deep";
import qs from "querystring";
// import { Loading } from 'element-ui'
import {
  showFullScreenLoading,
  tryHideFullScreenLoading
} from "./request-loading";
import router from "@/router/index";
import Vue from "vue";
const showMessage = Symbol("showMessage");
class DonMessage {
  success(options, single = true) {
    this[showMessage]("success", options, single);
  }
  warning(options, single = true) {
    this[showMessage]("warning", options, single);
  }
  info(options, single = true) {
    this[showMessage]("info", options, single);
  }
  error(options, single = true) {
    this[showMessage]("error", options, single);
  }
  [showMessage](type, options, single) {
    if (single) {
      // 判断是否已存在Message
      if (document.getElementsByClassName("el-message").length === 0) {
        Message[type](options);
      }
    } else {
      Message[type](options);
    }
  }
}

Vue.use(ElementUI);
// 命名根据需要，DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage();

let vue = new Vue();

// let loading        //定义loading变量

// function startLoading () {    //使用Element loading-start 方法
//   loading = Loading.service({
//     lock: true,
//     fullscreen: true,
//     text: '加载中……',
//     background: 'rgba(0, 0, 0, 0.7)'
//   })
// }
// function endLoading () {
//   //使用Element loading-close 方法
//   loading.close();
// }
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// create an axios instance
const service = axios.create({
  baseURL: "", // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 180000 // request timeout
});
// { fullscreen: true, text: '努力加载中', spinner: 'el-icon-loading' }
// request interceptor
service.interceptors.request.use(
  async config => {
    // do something before request is sent
    await showFullScreenLoading(store);
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers["Authorization"] = getToken();
      // config.headers['content-type'] = "application/x-www-form-urlencoded"
    }
    let tenantConfig = sessionStorage.getItem("tenantConfig");
    tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
    if (tenantConfig.tenantId && tenantConfig.tenantId != "undefined") {
      config.headers["tenantId"] = tenantConfig.tenantId;
    }
    config.params = cleanDeep(config.params);
    //  params: cleanDeep(options.params),
    //  (config)
    return config;
  },
  error => {
    // do something with request error
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  async res => {
    //res.code !== 200
    await tryHideFullScreenLoading(store);
    if (res.data.code) {
      let data = JSON.parse(JSON.stringify(res.data));
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (data.code == 401 || data.code == 403) {
        // Message({
        //   message: `登录过期，请重新登录！`,
        //   type: 'error',
        //   duration: 5 * 1000
        // })
        vue.$message.error(`登录过期，请重新登录！`);
        removeToken();
        setToken("");
        await store.dispatch("user/resetToken").then(() => {
          setTimeout(async () => {
          location.reload();
          }, 1000);
        });

        return;
      }
      if (data.code == 404) {
        router.push("/404");
      }
      if (
        (data.code < 200 && data.code != 100) ||
        (data.code >= 300 && data.code != 100)
      ) {
        // Message({
        //   message: data.msg || `请求失败code码为${ data.code }`,
        //   type: 'error',
        //   duration: 5 * 1000
        // })
        let str = data.msg || `请求失败code码为${data.code}`;

        vue.$message.error(str);

        return Promise.reject(new Error(data.msg || "Error"));
      } else {
        return data;
      }
    } else {
      return Promise.reject();
    }
  },
  async error => {
    if (error.message == "Network Error") {
      vue.$message.error("网络异常，请检查网络连接");
    } else {
      vue.$message.error(error.message);
    }
    await tryHideFullScreenLoading(store);
    return Promise.reject(error);
  }
);
export default service;