如何在Vue項目中添加接口監(jiān)聽遮罩

更新時間：2021年01月25日 11:30:07 作者：RiverTT

這篇文章主要介紹了如何在Vue項目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、業(yè)務(wù)背景

使用遮罩層來屏蔽用戶的非正常操作，是前端經(jīng)常使用的方式。但是在一些項目中，并沒有對遮罩層進行統(tǒng)一管理，這就會造成如下的問題：
（1）所有的業(yè)務(wù)組件都要引入遮罩層組件，也就是每個.vue業(yè)務(wù)組件，都在template中引入了Mask組件。組件在項目的各個角落都存在，不利于管理，代碼極度冗余。
（2）Mask組件都分散到業(yè)務(wù)的各個角落，所以控制是否顯示遮罩層的變量也散在業(yè)務(wù)組件中。比如使用maskShow來控制是否展示遮罩層時，一個較為復(fù)雜的項目中會產(chǎn)生200+的maskShow變量。
（3）maskShow過多且融入在業(yè)務(wù)中，同時maskShow的變量往往寫在接口的回調(diào)函數(shù)中，經(jīng)常會出現(xiàn)忘記改變變量的情況，造成遮罩層該顯示和不該顯示的邏輯出錯。
（4）項目經(jīng)常是在本地調(diào)試，而真實運行卻又在線上，（3）中的問題在本地經(jīng)常無法驗證出。因為這些問題經(jīng)常是在線上網(wǎng)絡(luò)環(huán)境較差的情況出現(xiàn)。如一個按鈕按完之后，需要等接口返回才能再次點擊，但是本地因為返回速度較快，如果忘記添加遮罩層也不會有什么問題。但如果是網(wǎng)絡(luò)有問題的線上環(huán)境，就很容易出現(xiàn)，且該問題一旦出現(xiàn)，很難定位，大大影響工作效率。

二、問題分析

根據(jù)上述的背景，在實際項目中添加一個公共的遮罩層組件進行管理，就變的十分有意義。經(jīng)過分析，具體需要解決如下問題：
（1）遮罩層出現(xiàn)和關(guān)閉的時機。
（2）Mask組件設(shè)計。
（3）該組件如何優(yōu)雅的引入到項目中，不產(chǎn)生耦合。
（4）如何在已有的項目中，漸進式的更換原有的maskShow的方式，從而不造成大面積問題。
（5）細節(jié)問題

三、組件設(shè)計

1、遮罩層出現(xiàn)和關(guān)閉的時機

該問題根據(jù)不同業(yè)務(wù)需求決定，但是筆者認為，大部分遮罩的出現(xiàn)和關(guān)閉主要取決于接口的請求和返回，一個接口在請求pending狀態(tài)下，顯示遮罩層，所有接口返回則關(guān)閉遮罩。本文主要解決的是接口請求遮罩問題，使用ts進行編寫，且并不會羅列所有細節(jié)。

2、Mask組件設(shè)計

Mask組件為一個class，將細節(jié)屏蔽在class內(nèi)部。
（1）class內(nèi)部最主要功能為添加和刪除遮罩層，傳輸?shù)漠斍罢埱蠼涌诘膗rl。

class Mask {
 // 顯示遮罩層
 appendMask(url: string): void{}

 // 刪除遮罩層
 removeMaskl(url: string): void{}
}

（2）添加遮罩層函數(shù)，請求時調(diào)用該函數(shù)，傳入當前接口url。函數(shù)內(nèi)部維護一個監(jiān)聽對象，用以監(jiān)聽當前是否存在pending狀態(tài)的請求。該對象的value為該接口pending狀態(tài)的數(shù)量。通過假設(shè)遮罩視圖組件已經(jīng)掛載到了Vue原型鏈上，如果沒有，則在組件上方引入即可。

// 監(jiān)聽對象數(shù)據(jù)類型定義
interface HTTPDictInterface {
 [index: string]: number;
}

appendMask(url: string): void{ 

 if(!this.monitorHTTPDict[url]){
 this.monitorHTTPDict[url] = 0;
 }
 this.monitorHTTPDict[url] += 1;

 // 如果存在監(jiān)聽接口，則顯示遮罩層
 if(!this.mask && Object.keys(this.monitorHTTPDict).length){

 // 在body上添加遮罩層樣式，$Mask為遮罩層樣式組件
 const Constructor = Vue.extend(Vue.prototype.$Mask);
 this.mask = new Constructor().$mount();

 document.body.appendChild(this.mask.$el);
 }
}

（3）刪除遮罩層函數(shù)，每次請求結(jié)束之后都會調(diào)用該函數(shù)，當發(fā)現(xiàn)請求監(jiān)聽對象為空時，刪除的遮罩層。如果沒有pending狀態(tài)的接口，刪除該對接的key。該對象為空且有遮罩層的情況下，刪除遮罩層。

removeMask(url: string): void{

 // 成功返回后
 if (this.monitorHTTPDict[monitorUrl]) {
 this.monitorHTTPDict[monitorUrl] -= 1;
 if (this.monitorHTTPDict[monitorUrl] <= 0) {
 delete this.monitorHTTPDict[monitorUrl];
 }
 }

 // hasMask用以檢測頁面是否存在遮罩層標簽元素
 if (this.mask && this.hasMask() && !Object.keys(this.monitorHTTPDict).length) {
 document.body.removeChild(this.mask.$el);
 this.mask = null;
 }

 this.timer = null;
}

3、該組件如何優(yōu)雅的引入到項目中，不產(chǎn)生耦合。

使用該組件，需要在所有的請求發(fā)起之前調(diào)用appendMask函數(shù)，所有的請求結(jié)束之后調(diào)用removeMask函數(shù)。這就有如下兩種調(diào)用方式。
（1）使用axios等組件的回調(diào)，完成函數(shù)調(diào)用。但是這種做法并沒有將Mask組件的代碼獨立于項目，它依賴于具體接口框架的API。

instance.interceptors.request.use((config) => {

 // 添加遮罩層
 mask.appendMask(config.url);

 return config;
});

（2）添加init函數(shù)，直接在原生XMLHttpRequest對象中注入回調(diào)。更改原生XMLHttpRequest函數(shù)，在事件'loadstart'和'loadend'中注入回調(diào)，需要注意的是，loadstart接收的傳參中，并沒有當前請求的url，所以還需要改寫open函數(shù)，把open接收傳參的url掛載到新的xhr對象上。慎用該方法。因為更改原生API的方式十分危險，在很多編碼規(guī)范中是禁止的，如果所有人都對原生API進行改寫，當同時引入這些框架會產(chǎn)生沖突，造成無法意料的后果。

// 通過傳參來決定是否使用該方法

init(){
 if (this.autoMonitoring){
 this.initRequestMonitor();
 }
}

// 新的xmlhttprequest類型
interface NewXhrInterface extends XMLHttpRequest{
 requestUrl?: string
}

// 原生注入
initRequestMonitor(): void{

 let OldXHR = window.XMLHttpRequest;
 let maskClass: Mask = this;

 // @ts-ignore，編碼規(guī)范不允許修改XMLHttpRequest
 window.XMLHttpRequest = function () {

 let realXHR: NewXhrInterface = new OldXHR();
 let oldOpen: Function = realXHR.open;

 realXHR.open = (...args: (string | boolean | undefined | null)[]): void => {

 realXHR.requestUrl = (args[1] as string);
 oldOpen.apply(realXHR, args);

 };

 realXHR.addEventListener(`loadstart`, () => {

 const requestUrl: string = (realXHR.requestUrl as string);

 const url: string = maskClass.cleanBaseUrl(requestUrl);

 // 開啟遮罩
 maskClass.appendMask(url);
 });

 realXHR.addEventListener(`loadend`, () => {

 const responseURL: string = (realXHR as XMLHttpRequest).responseURL;
 const url: string = maskClass.cleanBaseUrl(responseURL);

 // 刪除遮罩
 maskClass.removeMask(url);
 });

 return realXHR;
 };
}

（3）注入使用方式，直接調(diào)用init。這樣改項目的所有請求都會經(jīng)過Mask。

new Mask().init()

4、如何在已有的項目中，漸進式的更換原有的maskShow的方式，從而不造成大面積問題。

如果直接在全項目中使用，牽扯的面積就會變得很廣，會大面積的產(chǎn)生問題，反而得不償失。所以應(yīng)該采取一種漸進更換的方式，做到平滑過渡。主要思路是通過配置頁面和黑名單的方式，來決定哪些頁面引入該組件，從而讓每個組員自己修改，畢竟頁面的負責人才是最了解當前頁面業(yè)務(wù)的人。至于如何黑名單還是白名單，則由項目的具體業(yè)務(wù)決定。

// key需要監(jiān)聽的路由頁面，value為一個數(shù)組，數(shù)組中填寫的接口為黑名單，不需要監(jiān)聽的接口
const PAGE_ONE = `/home`;
const PAGE_TWO = `/login`;
const HTTO_ONE = `xxx`

export const maskUrlList = {
 [PAGE_ONE]: [HTTO_ONE],
 [PAGE_TWO]: [],
};

appendMask方法過濾黑名單和沒有配置的頁面。maskUrlList為控制的對象，先檢查頁面路由，之后檢查是否存在黑名單。

appendMask(url: string): void{

 // 獲取當前頁面的path，獲取頁面路徑，根據(jù)hash和history模式進行區(qū)分
 const monitorPath: string = this.getMonitorPath();

 // maskUrlList為配置項，先檢查頁面路由，之后檢查是否存在黑名單
 if (this.maskUrlList[monitorPath]
 && !this.maskUrlList[monitorPath].includes(url)) {
 if (this.monitorHTTPDict[url] === undefined) {
 this.monitorHTTPDict[url] = 0;
 }
 this.monitorHTTPDict[monitorUrl] += 1;
 }

 // 添加遮罩層
 if (!this.mask && this.hasMonitorUrl()) {
 const Constructor = Vue.extend(Vue.prototype.$Mask);
 this.mask = new Constructor().$mount();

 document.body.appendChild(this.mask.$el);
 }
}

5、細節(jié)問題

（1）渲染之后才關(guān)閉遮罩層，將實際刪除遮罩層邏輯放到定時器中，Vue的異步渲染采用的promise，所以關(guān)閉在如果放在渲染之后，需要放入setTimeout中。這里涉及到事件循環(huán)的知識。當接口返回，如果需要渲染頁面，則會異步執(zhí)行一個Promise，Promise為微任務(wù)，setTimeout為宏任務(wù)，當主線程執(zhí)行完畢后，會先執(zhí)行微任務(wù)，之后才會執(zhí)行異步的宏任務(wù)setTimeout。

// 清理遮罩層
if (!this.timer) {
 this.timer = window.setTimeout(() => {

 if (this.mask && this.hasMask() && !this.hasMonitorUrl()) {
 document.body.removeChild(this.mask.$el);
 this.mask = null;
 }

 this.timer = null;

 }, 0);
}

（2）過濾接口的‘?'，以及hash模式下的‘#'，

// 獲取請求接口的url
getMonitorUrl(url: string): string{
 const urlIndex: number = url.indexOf(`?`);
 let monitorUrl: string = url;
 if (urlIndex !== -1) {
 monitorUrl = url.substring(0, urlIndex);
 }
 return monitorUrl;
}
// 獲取當前路由path
getMonitorPath(): string{

 const path: string = this.mode === HASH_TYPE ? window.location.hash : window.location.pathname;

 let monitorPath: string = path;

 if (this.mode === HASH_TYPE) {
 monitorPath = monitorPath.substring(path.indexOf(`#`) + 1);
 }

 // 截圖路徑，刪除請求參數(shù)
 const hashIndex: number = monitorPath.indexOf(`?`);

 if (hashIndex !== -1) {
 monitorPath = monitorPath.substring(0, hashIndex);
 }

 return monitorPath;
}

（3）接口過濾baseUrl。細心的話，會發(fā)現(xiàn)在使用axios的接口時，自行決定是否帶入baseUrl，那是因為axios會在請求時進行區(qū)分過濾。如果項目前期并沒有很好的定義使用方式的話，會有兩種不同使用axios的方式。那么，就需要對baseUrl進行過濾。

// 去除baseUrl
cleanBaseUrl(fullUrl: string): string {

 const baseUrlLength: number = this.baseUrl.length;
 return fullUrl.substring(baseUrlLength);
 
}

（4）組件初始化，通過傳入params的方式，將對象實例化出來。

new Mask({
 modeType, // hash或history
 autoMonitoring, // 是否更寫原生XMLHttpRequest對象
 maskUrlList, // 配置引入的頁面和接口
 baseUrl, // 當前項目的baseUrl
 ...
}).init()

四、總結(jié)

本文介紹了統(tǒng)一遮罩層的背景、問題及設(shè)計方案。但并沒有將所有細節(jié)進行列舉，這需要根據(jù)實際業(yè)務(wù)進行選擇。但大體方案已經(jīng)列出：
（1）遮罩層應(yīng)該在一些接口pending裝的時候顯示，所有接口返回后自動關(guān)閉。這里的接口是指需要監(jiān)聽的接口
（2）組件最重要的兩個函數(shù)為appendMask添加遮罩層和removeMask刪除遮罩層。
（3）如果想Mask完全獨立，并不想依賴于第三方庫（axios）的回調(diào)，可以直接對XMLHttpRequest進行改寫，但這樣做風險很大，并不建議。
（4）組件更換統(tǒng)一組員自己配置路由及監(jiān)聽接口的方式。這里的邏輯可以自行決定，如果要監(jiān)聽的接口多，可以采用黑名單，反之則白名單。
（5）對渲染的優(yōu)化、請求帶參數(shù)、路由的模式進行了優(yōu)化。

到此這篇關(guān)于如何在Vue項目中添加接口監(jiān)聽遮罩的文章就介紹到這了,更多相關(guān)Vue 接口監(jiān)聽遮罩內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: