2020-04-14 vue axios 拦截请求 全局load

/**
 * request.js
 * @description 通过axois的钩子函数，进行统一处理和基本操作
 * */

import axios from "axios";
import api from "@/base/api";
// import qs from "qs";

let needLoadingRequestCount = 0

//请求基本设置
const service = axios.create({
  //withCredentials: true,
  timeout: 5000
});

//请求前拦截
service.interceptors.request.use(
  (config, res) => {
    config.headers['token'] = api.loginGetUserSync() && api.loginGetUserSync().token || null;
    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded;'
    return config
  },
  error => {
    return Promise.reject(error || "请求出错");
  }
);

//请求响应后处理
service.interceptors.response.use(
  response => {
    const data = response.data;

    hideLoading()

    //处理后端内部逻辑错误的提示(成功1 失败0)
    if (data.code !== 1) {
      api.toast(data.msg, 'bottom'); //逻辑异常提示
      //如果是401,代表token过期
      if (data.code === 401) {
        //退出登录
        api.loginOut('login')
      }
    }

    return Promise.resolve(data);

  },
  error => {

    const status = error.status;
    const statusMsg = error.statusMsg;
    hideLoading()

    errorResponse(status, statusMsg);

    return Promise.reject(statusMsg || "获取数据出错啦");
  }
);

//请求响应后错误处理
function errorResponse(status, statusMsg) {
  if (status) {
    status = status.toString();
    switch (status) {
      case "401":
        api.toast("登录过期！");
        //退出登录
        api.loginOut('login')
        break;
      case "404":
        api.toast("页面不存在！");
        break;

      default:
        api.toast(statusMsg || "未知错误");
        break;
    }
  } else {

    if (navigator) {
      if (!navigator.onLine) {
        api.toast("请检查网络是否连接");
      }
    }

  }

}

/**
 * 发起请求
 * @param {Boolean} option
 * @param {Boolean} option.isShowLoading 是否显示加载框
 * @param {String} option.url 请求url
 * @param {Object} option.param 传参
 * @return {Promise} then(data) 成功返回data(结果数据)
 * @return {Promise} catch(reason) 失败返回reason(失败原因)
 */
export default function request(option = {}) {
  if (option.isShowLoading) {
    showLoading(option.loadingMsg);
  }
  return service(option);
}


//showLoading() hideLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用 hideLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
export function showLoading(loadingMsg) {
  if (needLoadingRequestCount === 0) {
    api.showLoading(loadingMsg);
  }
  needLoadingRequestCount++
}
export function hideLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    api.hideLoading();
  }
}