ajax二次封装配合防抖处理，vue，axios，elementUI（改）

纯属个人记录，代码很糙，因为博客之前发布过一次，这次是修订之后的。已经比较全面的解决了我目前所遇到的痛点。

项目痛点：

1、每次接口调用完成都需要处理错误提示和操作成功提示。

2、页面蒙版并不能解决用户点击提交的时候重复提交请求

解决：

1、ajax继承页面蒙版控制

2、错误和成功信息既可以全局处理也可以自定义

3、ajax代码集成防抖函数

4、默认数据过滤处理，当字符串中出现NaN，undefined，null则过滤，数据为空过滤，注意长度为零的数组不过滤

项目环境：vue，axios，elementUI

ajax防抖缺陷：

防抖处理缺陷：
 当两个函数同时需要防抖的时候另一个函数也会受到防抖的影响，所以请避免同时需要防抖。如需要，额外处理第二个防抖函数。

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";

import { Notification, Loading } from "element-ui";

// axios全局导入设置
Vue.use(VueAxios, axios);

//自定义函数信息
let custom = {
  //成功信息提示
  sucIfno(info) {
    Notification({
      type: "success",
      message: info
    });
  },
  //错误信息提示
  errIfno(info) {
    Notification({
      type: "error",
      message: info
    });
  }
};
//过滤空数据包含NaN，undefined，null
const filterNull = json => {
  let newJson = {};
  let reg = RegExp(/NaN|undefined|null/);
  for (let li in json) {
    if (json[li] && !reg.test(json[li])) {
      newJson[li] = json[li];
    }
  }
  return newJson;
};
const ajax = o => {
  o.loading = o.loading || false; //是否出现全局加载提示，支持传入字符串
  o.data = o.data || {};
  o.filterNull = o.filterNull !== false;
  o.headers = o.headers || {
    "Content-Type": "application/json;charset=UTF-8"
  };

  //成功提示信息，传入true则提示默认信息，传入字符串则出现字符串信息
  o.is_suc = o.is_suc || false;
  o.is_suc = o.is_suc === true ? "操作成功" : o.is_suc;
  //错误提示信息，默认不出现，传入true则出现后端接口提示信息，传入字符串则提示字符串信息
  o.is_err = o.is_err || false;
  o.is_err = o.is_err === true ? "网络异常" : o.is_err;

  //空数据过滤
  o.data = o.filterNull === true ? filterNull(o.data) : o.data;

  const method = o.method;
  let loadingInstance = "";
  if (o.loading) {
    loadingInstance = Loading.service({
      lock: true,
      text: o.loading !== true ? o.loading : "努力加载中……",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
  }
  return new Promise((suc, err) => {
    axios({
      url: o.url,
      [method === "post" ? "data" : "params"]: o.data,
      headers: o.headers,
      method: method || "get"
    })
      .then(t => {
        if (o.loading) {
          loadingInstance.close();
        }
        let req = t.data;
        if (req && req.code === 0) {
          //正确提示信息
          o.is_suc !== false && custom.sucIfno(o.is_suc);
          suc(req);
        } else {
          //错误信息提示
          if (o.is_err !== false) {
            o.is_err !== "网络异常"
              ? custom.errIfno(o.is_err)
              : custom.errIfno(req.msg ? req.msg : "网络异常");
          }
          err(req);
        }
      })
      .catch(e => {
        if (o.loading) {
          loadingInstance.close();
        }
        //错误信息提示
        o.is_err !== false ? custom.errIfno("网络异常") : false;
        err(e);
      });
  });
};
/*防抖处理缺陷：
 当两个函数同时需要防抖的时候另一个函数也会受到防抖的影响，所以请避免同时需要防抖。如需要，额外处理第二个防抖函数。
 * */
let timeOut = null;
axios.ajax = opt => {
  //是否防抖
  let isAntiShake = opt.isAntiShake || false;
  let shakeTime = opt.shakeTime || 500; //默认防抖时间半秒
  if (!isAntiShake) {
    //不进行防抖处理
    return new Promise((suc, err) => {
      ajax(opt)
        .then(e => {
          suc(e);
        })
        .catch(e => {
          err(e);
        });
    });
  } else {
    //进行防抖处理
    return new Promise((suc, err) => {
      timeOut && clearTimeout(timeOut);
      let callNow = !timeOut;
      if (callNow) {
        ajax(opt)
          .then(e => {
            suc(e);
          })
          .catch(e => {
            err(e);
          });
      }
      timeOut = setTimeout(
        () => {
          timeOut = null;
        }, //见注解
        shakeTime
      );
    });
  }
};

export default axios;

最后：防抖内容请看我之前的博客