axios接口管理優(yōu)化操作詳解

更新時(shí)間：2022年12月15日 15:03:07 作者：Chang愛學(xué)習(xí)

這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

強(qiáng)化功能

本文針對(duì)中大型的后臺(tái)項(xiàng)目的接口模塊優(yōu)化，在不影響項(xiàng)目正常運(yùn)行的前提下，增量更新。

接口文件寫法簡化（接口模塊半自動(dòng)化生成）
任務(wù)調(diào)度、Loading調(diào)度（接口層面的防抖兜底，多個(gè)接口共用一個(gè)loading，防止閃爍）
接口提示自由化（提示消息可由前端控制，也可以由后端控制）

接口文件寫法簡化

對(duì)于一些中后臺(tái)模塊的接口，基本上都是增刪改查以及審核流的一些功能(其他特殊接口暫且不談)。如果后端接口足夠規(guī)范的話，大概就是下面這個(gè)情形

import request from "@/utils/request";
// 銷售退貨列表
export function getSalesReturnList(data) {
  return request({
    url: "/sales_return/list",
    method: "post",
    data,
  });
}
// 保存銷售退貨
export function saveSalesReturn(data) {
  return request({
    url: "/sales_return/save",
    method: "post",
    data,
  });
}
// 根據(jù)Id獲取銷售退貨
export function getSalesReturn(query) {
  return request({
    url: "/sales_return/get",
    method: "get",
    params: query,
  });
}
// 根據(jù)Id刪除銷售退貨
export function deleteSalesReturn(data) {
  return request({
    url: "/sales_return/delete",
    method: "post",
    data,
  });
}
// 提交銷售退貨審核
export function submitSalesReturn(data) {
  return request({
    url: "/sales_return/submit",
    method: "post",
    data,
  });
}
// 審核銷售退貨
export function auditSalesReturn(data) {
  return request({
    url: "/sales_return/audit",
    method: "post",
    data,
  });
}
// 撤審銷售退貨
export function revokeAuditSalesReturn(data) {
  return request({
    url: "/sales_return/withdraw",
    method: "post",
    data,
  });
}
// 審核拒絕銷售退貨
export function rejectSalesReturn(data) {
  return request({
    url: "/sales_return/reject",
    method: "post",
    data,
  });
}
// 作廢銷售退貨
export function discardSalesReturn(data) {
  return request({
    url: "/sales_return/discard",
    method: "post",
    data,
  });
}

我覺得這個(gè)也太重復(fù)了，而且接口函數(shù)命名太麻煩了，要讓團(tuán)隊(duì)規(guī)范起來比較困難。能不能自動(dòng)生成了，命名也幫忙處理了，這樣這種接口文件豈不是更加規(guī)范。

接下來想想辦法

假設(shè)如上，一個(gè)單據(jù)模塊的通常來說有九個(gè)接口方法，增刪改查，提交、作廢、審核、撤審、拒絕。他們的 url，前面的 sales_return 拼接是固定的，不同的就是后面標(biāo)識(shí)功能的路徑標(biāo)識(shí)。另外就是，method 分為 post 和 get 方法。

我們把這九個(gè)接口，看成是一個(gè) 9 位二進(jìn)制上的 9 個(gè)位，1 代表存在，0 代表不存在。

我們可以創(chuàng)建一個(gè) map 文件來做構(gòu)建準(zhǔn)備（如下）

export const apiEnum = {
  // 查列表  2^0
  1: {
    name: "list",//接口名稱
    type: "post",//接口方式
  },
  // 查詳情  2^1
  2: {
    name: "get",
    type: "get",
    loading: true,//是否需要loading調(diào)度、防抖
  },
  // 刪列表 2^2
  4: {
    name: "delete",
    type: "post",
  },
  // 保存 或者 保存且提交  2^3
  8: {
    name: "save",
    type: "post",
    loading: true,
  },
  // 提交  2^4
  16: {
    name: "submit",
    type: "post",
    loading: true,
  },
  // 審核  2^5
  32: {
    name: "audit",
    type: "post",
  },
  // 撤審  2^6
  64: {
    name: "withdraw",
    type: "post",
  },
  // 拒絕  2^7
  128: {
    name: "reject",
    type: "post",
  },
  // 作廢  2^7
  256: {
    name: "discard",
    type: "post",
  },
};
export const apiFuncModule = {
  // 全部
  COMMON: 511,
  // 增刪改查
  CURD: 15,
};

當(dāng)我傳 1 的時(shí)候，九位為000000001,代表只有一個(gè)查接口。當(dāng)我傳 15 的時(shí)候，九位為000001111,代表擁有增刪改查四個(gè)接口。以此類推。

接下就是完成處理函數(shù)，完成上面的功能（如下）

import request from "@/utils/request";
import { apiEnum, apiFuncModule } from "@/enum/baseModule/apiEnum";
function useApi(moduleName, code = 511) {
  let apiMap = {};
  for (let key in apiEnum) {
    if ((key & code) == key) {
      let obj = apiEnum[key];
   //可以按自己習(xí)慣來對(duì)接口函數(shù)命名
      let apiName = "api_" + obj.name;
      apiMap[apiName] = (data) => {
        return request({
          url: `/${moduleName}/${obj.name}`,
          method: obj.type,
          [obj.type == "get" ? "params" : "data"]: data,
          loading: obj.loading,
        });
      };
    }
  }
  return apiMap;
}
export { useApi, apiFuncModule as apiType };

完成以上步驟，我們的接口文件就可以這樣寫了,這樣九個(gè)接口就寫完了。而且一目了然，如需修改，只需要調(diào)整傳參就行了。

import { useApi } from "@/utils/system/apiGenPlugin";
//code可以不傳 ，默認(rèn)為511
export const API = useApi("sales_return");
//若有其他特殊接口 兼容原始寫法 互不影響
export function xxxxx(data) {
    ...
}

使用方式

//API集中管理
import { API as SalesReturn } from "@/api/workApi/sale/return";
const {api_save,api_delete,api_get,api_list,api_audit,api_withdraw,api_discard,api_submit,api_reject} = SalesReturn
//單獨(dú)使用
import { useApi } from "@/utils/system/apiGenPlugin";
const {api_save,api_delete,api_get,api_list,api_audit,api_withdraw,api_discard,api_submit,api_reject} = useApi('sales_return')

增 SalesReturn.api_save
刪 SalesReturn.api_delete
改 SalesReturn.api_get
查 SalesReturn.api_list
審核 SalesReturn.api_audit
撤審 SalesReturn.api_withdraw
作廢 SalesReturn.api_discard
提交 SalesReturn.api_submit
拒絕 SalesReturn.api_reject

任務(wù)調(diào)度、Loading調(diào)度

實(shí)際開發(fā)中，我們可能會(huì)有對(duì)接口調(diào)用做一些處理

對(duì)提交事件進(jìn)行防抖處理，防止重復(fù)提交。
加載某些重要資源的時(shí)候，希望有個(gè)loading效果，來優(yōu)化用戶體驗(yàn)。
讓多個(gè)需要loading效果的接口，共用同一個(gè)loading，防止頁面閃爍。

這些功能單獨(dú)處理起來就顯得很麻煩了，而且每個(gè)人的寫法不一樣，后期維護(hù)成本就更難。

廢話不多說，直接貼代碼

接口調(diào)度類

import { Loading } from "element-ui";
class RequestLock {
  // Loading 實(shí)例
  L_instance = null;
  // 接口map
  reqMap = new Map();
  // 最近一次調(diào)用接口時(shí)間戳
  timestamp = 0;
  constructor(timeout = 500) {
    // 過渡時(shí)間
    this.timeout = timeout;
  }
  // 創(chuàng)建任務(wù)
  put = (id) => {
    if (this.reqMap.has(id)) return false;
    this._put(id);
    return true;
  };
  _put = (id) => {
    this.timestamp = new Date().getTime();
    this.reqMap.set(id, true);
      //開啟loading
    this.L_instance = Loading.service({
      fullscreen: true,
      background: "rgba(255, 255, 255, 0.1)",
      lock: true,
    });
  };
  // 移除任務(wù)
  del = (id) => {
    if (this.reqMap.has(id)) {
      this.reqMap.delete(id);
      if (this.reqMap.size == 0) {
        this._closeLoading();
      }
    }
  };
  // 清空所有的任務(wù)
  clearTask = () => {
    this.reqMap.clear();
    this.L_instance.close();
  };
    //平滑關(guān)閉loading
  _closeLoading = () => {
    let _timestamp = new Date().getTime();
    let settime = _timestamp - this.timestamp;
    if (settime > this.timeout) {
      this.L_instance?.close();
    } else {
      setTimeout(() => {
        this.L_instance?.close();
      }, this.timeout - settime);
    }
  };
}
export default RequestLock;

在axios里的使用

這個(gè)是增量優(yōu)化，在不影響以前代碼的條件下，添加功能

import { RequestLock } from "@/class/lock";
let loadLock = new RequestLock(500);
//請(qǐng)求攔截
service.interceptors.request.use(
  (config) => {
      ...
      //如果配置中有l(wèi)oading 開啟調(diào)度
    if (config.loading) {
      if (!loadLock.put(config.url)) {
        return Promise.reject(new Error("repeat request！"));
      }
    }
      ...
    return config;
  },
  (error) => {
      ...
      //如果有錯(cuò)誤請(qǐng)求，中止當(dāng)前調(diào)度任務(wù)，并清空
    loadLock.clearTask();
      ...
    return Promise.reject(error);
  }
);
//響應(yīng)攔截
service.interceptors.response.use(
  (response) => {
    ...
    //檢查
    response.config.loading && loadLock.del(response.config.url);
    ...
  },
  (error) => {
    loadLock.clearTask();
    return Promise.reject(error);
  }
);

接口文件書寫

// 根據(jù)Id獲取銷售退貨
export function getSalesReturn(query) {
  return request({
    url: "/sales_return/get",
    method: "get",
    params: query,
    //在這里配置loading為true，開啟
    loading:true
  });
}

提示信息自由化

有時(shí)候當(dāng)我刪除一條數(shù)據(jù)，需要有個(gè)彈框提示刪除是否成功。通常我們會(huì)在接口成功回調(diào)的時(shí)候加上這個(gè)功能。需要判斷狀態(tài)，來顯示提示框的描述和顏色。另一方面，有時(shí)候刪除一條數(shù)據(jù)，業(yè)務(wù)需求提示不單單是簡單的“刪除成功！”，還可能需要其他的附加提示。比如“刪除單據(jù)xxx成功，請(qǐng)及時(shí)處理xxxx！”。這種需求沒什么難度，但是有溝通成本和維護(hù)成本。業(yè)務(wù)有一些變化就需要修改。

另一方面，后端對(duì)系統(tǒng)的業(yè)務(wù)邏輯更加貼近，提示功能交給后端更加合理。當(dāng)然，前端也需要保留這個(gè)功能，去兼容某些需求。

import { Message } from "element-ui";
export function responseMsgHandle(res) {
    //這里需要后端響應(yīng)數(shù)據(jù)格式的配合，MsgType表示提示狀態(tài)，Msg表示提示描述
  let { MsgType, Msg } = res;
  if (["success", "warning", "error"].includes(MsgType)) {
    Message({
      message: Msg,
      type: MsgType,
      duration: 5 * 1000,
    });
  }
}

使用

import { responseMsgHandle } from "@/utils";
//響應(yīng)攔截
service.interceptors.response.use(
  (response) => {
    ...
    const res = response.data;
    responseMsgHandle(res);
    ...
  },
  (error) => {
      ...
    responseMsgHandle({
        MsgType:"error",
        Msg:error.message,
    });
      ...
    return Promise.reject(error);
  }
);