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;

最後：防抖內容請看我之前的博客