ops-web/src/plugins/axios.js

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" });
}