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;