import axios from "axios"; import Vue from "vue"; import { Message, MessageBox, Notification } from "element-ui"; import router from "../router"; import qs from "qs"; import GLOBAL from "../config"; import { getAuthorization } from "./crypto"; import { PLATFORM, DEVICE_ID } from "../constants/app"; import { initSyncTime, fetchTime } from "./syncServerTime"; // axios interceptors var load = ""; // 同一时间有多个请求时,会形成队列。在第一个请求创建loading,在最后一个响应关闭loading var queue = []; // 设置延迟时效 axios.defaults.timeout = GLOBAL.timeout; axios.interceptors.request.use( config => { // 显示loading提示 if (!queue.length) { load = Message({ customClass: "el-message-loading", iconClass: "el-message__icon el-icon-loading", message: "Loading...", duration: 0 }); } queue.push(1); // 为请求头添加鉴权信息 let token = Vue.ls.get("token"); if (token) { // 新版鉴权 const sessionId = Vue.ls.get("user", { session: "" }).session; const timestamp = fetchTime(); const Authorization = getAuthorization( { token: token, timestamp, account: sessionId, uri: config.url.split("?")[0], method: config.method }, "token" ); config.headers["Authorization"] = Authorization; config.headers["time"] = timestamp; } config.headers["deviceId"] = DEVICE_ID; config.headers["platform"] = PLATFORM; config.headers["domain"] = window.location.origin; return config; }, error => { // 关闭loading提示 // 串联并发请求,延时处理是为防止多个loading实例闪屏。 setTimeout(() => { queue.shift(); if (!queue.length) load.close(); }, 100); return Promise.reject(error); } ); axios.interceptors.response.use( response => { initSyncTime(new Date(response.headers.date).getTime()); // 关闭loading提示 setTimeout(() => { queue.shift(); if (!queue.length) load.close(); }, 100); return response; }, error => { initSyncTime(new Date(error.response.headers.date).getTime()); // 关闭loading提示 setTimeout(() => { queue.shift(); if (!queue.length) load.close(); }, 100); return Promise.reject(error); } ); // request instance // 防止鉴权失效之后多次弹窗。 let unauthMsgBoxIsShow = false; const mdData = datas => { let nData = {}; if (!datas) return nData; Object.entries(datas).forEach(([key, val]) => { if (val === null || val === "null" || val === "") return; nData[key] = val; }); return nData; }; /** * errorCallback 请求失败的回调 * @param {Object} error 请求失败时的错误信息 */ const errorCallback = error => { if (error.response) { return errorDataCallback(error.response); } if (error.request) { let message = "请求错误"; if (error.message.indexOf("timeout") > -1) { message = "请求超时"; } Notification.error({ title: "错误提示", message }); } return error; }; /** * errorDataCallback 请求成功,结果有误的回调 * @param {Object} response Response信息 */ const errorDataCallback = response => { const error = response.data; let message = error.message || error.error || "请求错误"; const unauthCodes = [401, 403]; if (unauthCodes.includes(response.status)) { if (unauthMsgBoxIsShow) return error; unauthMsgBoxIsShow = true; message = "身份验证失效,请重新登录"; MessageBox.confirm(message, "重新登陆?", { type: "warning", cancelButtonClass: "el-button--danger is-plain", confirmButtonClass: "el-button--primary", closeOnClickModal: false, closeOnPressEscape: false, showClose: false, callback: action => { unauthMsgBoxIsShow = false; if (action !== "confirm") return; Vue.ls.clear(); router.push({ name: "Login" }); } }); } else { Notification.error({ title: "错误提示", message }); } return error; }; /** * response format * { config, header, data, request, status, statusText } * */ /** * successCallback 请求成功的回调 * @param {Object} data Response中的data信息 */ const successCallback = data => { return data; // if (data.code === 200) { // return data.data; // } else { // return Promise.reject(data.data); // } }; /** * get请求 * @param {String} url 请求地址 * @param {Object} datas 请求数据 */ const $get = (url, datas) => { return axios .get(url, { params: mdData(datas) }) .then(rep => { return successCallback(rep.data); }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; /** * get请求 * @param {String} url 请求地址 * @param {Object} datas 请求数据 */ const $postParam = (url, datas, config = {}) => { return axios .post(url, {}, { ...config, params: mdData(datas) }) .then(rep => { if (config["responseType"] === "blob") return rep; return successCallback(rep.data); }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; /** * post请求 * @param {String} url 请求地址 * @param {Object} datas 请求数据 */ const $post = (url, datas, config = {}) => { let sqDatas = {}; if (datas.constructor === Object) { sqDatas = mdData(datas); } else { sqDatas = datas; } return axios .post(url, sqDatas, config) .then(rep => { if (config["responseType"] === "blob") return rep; return successCallback(rep.data); }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; /** * delete请求 * @param {String} url * @param {Object} datas */ const $del = (url, datas) => { return axios .delete(url, { params: mdData(datas) }) .then(rep => { return rep.data; }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; /** * put 请求 * @param {String} url 请求地址 * @param {Object} datas 请求数据 */ const $put = (url, datas) => { return axios .put(url, { params: mdData(datas) }) .then(rep => { return rep.data; }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; /** * patch请求 * @param {String} url 请求地址 * @param {Object} datas 请求数据 */ const $patch = (url, datas) => { return axios .patch(url, { params: mdData(datas) }) .then(rep => { return rep.data; }) .catch(error => { return Promise.reject(errorCallback(error)); }); }; export { $get, $postParam, $post, $del, $put, $patch }; // qs export function qsRepeatParams(params) { return qs.stringify(params, { arrayFormat: "repeat" }); }