axios请求封装(包括loading、反馈信息、返回数据格式的处理)

直接上文件代码

/**
 * 全站http配置
 *
 * axios参数说明
 * isSerialize是否开启form表单提交
 * isToken是否需要token
 */
import axios from "axios";
import store from "@/store/";
import router from "@/router/router";
import { serialize } from "@/util/util";
import { getToken } from "@/util/auth";
import { Message } from "element-ui";
import { Loading } from "element-ui";
import website from "@/config/website";
import { Base64 } from "js-base64";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

//默认超时时间
axios.defaults.timeout = 10000;
//返回其他状态码
axios.defaults.validateStatus = function(status) {
  return status >= 200 && status <= 500;
};
//跨域请求,允许保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({
  showSpinner: false
});
let loadingInstance = null;

let defaultResMsgObj = {
  add: "添加成功",
  remove: "删除成功",
  update: "修改成功",
  submit: "提交成功"
};
const whiteUrls = ['http://up.qiniu.com/','/dict/dictionary','sockjs-node','endpoint/put-file'];

function isReturnRes(url){
    for(let i=0;i<whiteUrls.length;i++){
        if(url.indexOf(whiteUrls[i]) != -1){
            return true;
        }
    }
    return false;
}
function getResMsg(url) {
  if (url.indexOf("add") != -1) {
    return defaultResMsgObj.add;
  } else if (url.indexOf("remove") != -1) {
    return defaultResMsgObj.remove;
  } else if (url.indexOf("update") != -1) {
    return defaultResMsgObj.update;
  } else if (url.indexOf("submit") != -1) {
    return defaultResMsgObj.submit;
  }
  return "";
}
//http request拦截
axios.interceptors.request.use(
  config => {
    //xc 改 是否添加loading开始
    let loadingText = "";
    if (config.params && config.params.loadingOptions) {
      loadingText = config.params.loadingOptions.text;
    } else {
      loadingText = undefined;
    }
    if (typeof loadingText != "undefined") {
      loadingInstance = Loading.service(config.params.loadingOptions);
    }
    //xc 改 是否添加loading 结束
    //开启 progress bar
    NProgress.start();
    const meta = config.meta || {};
    const isToken = meta.isToken === false;
    config.headers["Authorization"] = `Basic ${Base64.encode(
      `${website.clientId}:${website.clientSecret}`
    )}`;
    //让每个请求携带token
    if (getToken() && !isToken) {
      config.headers[website.tokenHeader] = "bearer " + getToken();
    }
    //headers中配置text请求
    if (config.text === true) {
      config.headers["Content-Type"] = "text/plain";
    }
    //headers中配置serialize为true开启序列化
    if (config.method === "post" && meta.isSerialize === true) {
      config.data = serialize(config.data);
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
//http response 拦截
axios.interceptors.response.use(
  res => {
    let resMsg = "";
    let returnData = "data.data";
    let config = res.config;
    let url = config.url;
    resMsg = getResMsg(url);
    if (config.params && config.params.resMsg) {
      resMsg = config.params.resMsg;
    }

    if (config.params && config.params.returnData) {
      returnData = config.params.returnData;
    } else {
      returnData = returnData;
    }
    //单实例
    //关闭loading
    if (loadingInstance != null) loadingInstance.close();
    //关闭 progress bar
    NProgress.done();
    //获取状态码
    const status = res.data.code || res.status;
    const success = res.data.success;
    const statusWhiteList = website.statusWhiteList || [];
    const message = res.data.msg || res.data.error_description || "未知错误";
    //如果在白名单里则自行catch逻辑处理
    if (statusWhiteList.includes(status)) return Promise.reject(res);
    //如果是401则跳转到登录页面
    if (status === 401)
      store.dispatch("FedLogOut").then(() => router.push({ path: "/login" }));
    // 如果请求为非200否者默认统一处理
    let err = "";
    if (status !== 200 || (typeof success != "undefined" && !success)) {
      Message({
        message: message,
        type: "error"
      });
      err = message;
      //return Promise.reject(new Error(message))
    }
    if (success && resMsg != "") {
      Message({
        message: resMsg,
        type: "success"
      });
    }
    let result = {};

    if (returnData == "data.data") {
      result = res.data.data;
    } else if (returnData == "data") {
      result = res.data;
    }
    //处理avue源码中的请求处理
    if (isReturnRes(url)) {
      return res;
    }
    return [err, result];
  },
  error => {
    NProgress.done();
    Message({
      message: error,
      type: "error"
    });
    return [error];
  }
);

export default axios;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值