如何在Vue项目中添加接口监听遮罩

class Mask {
 // 显示遮罩层
 appendMask(url: string): void{}

 // 删除遮罩层
 removeMaskl(url: string): void{}
}

// 监听对象数据类型定义
interface HTTPDictInterface {
 [index: string]: number;
}

appendMask(url: string): void{ 

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

 // 如果存在监听接口，则显示遮罩层
 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);
 }
}

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;
}

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

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

 return config;
});

// 通过传参来决定是否使用该方法

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

// 新的xmlhttprequest类型
interface NewXhrInterface extends XMLHttpRequest{
 requestUrl"htmlcode">

new Mask().init()


4、如何在已有的项目中，渐进式的更换原有的maskShow的方式，从而不造成大面积问题。


如果直接在全项目中使用，牵扯的面积就会变得很广，会大面积的产生问题，反而得不偿失。所以应该采取一种渐进更换的方式，做到平滑过渡。主要思路是通过配置页面和黑名单的方式，来决定哪些页面引入该组件，从而让每个组员自己修改，毕竟页面的负责人才是最了解当前页面业务的人。至于如何黑名单还是白名单，则由项目的具体业务决定。


// key需要监听的路由页面，value为一个数组，数组中填写的接口为黑名单，不需要监听的接口
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，获取页面路径，根据hash和history模式进行区分
 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、细节问题


（1）渲染之后才关闭遮罩层，将实际删除遮罩层逻辑放到定时器中，Vue的异步渲染采用的promise，所以关闭在如果放在渲染之后，需要放入setTimeout中。这里涉及到事件循环的知识。当接口返回，如果需要渲染页面，则会异步执行一个Promise，Promise为微任务，setTimeout为宏任务，当主线程执行完毕后，会先执行微任务，之后才会执行异步的宏任务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）过滤接口的‘"htmlcode">

// 获取请求接口的url
getMonitorUrl(url: string): string{
 const urlIndex: number = url.indexOf(`"htmlcode">

// 去除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()




四、总结


本文介绍了统一遮罩层的背景、问题及设计方案。但并没有将所有细节进行列举，这需要根据实际业务进行选择。但大体方案已经列出：

（1）遮罩层应该在一些接口pending装的时候显示，所有接口返回后自动关闭。这里的接口是指需要监听的接口

（2）组件最重要的两个函数为appendMask添加遮罩层和removeMask删除遮罩层。

（3）如果想Mask完全独立，并不想依赖于第三方库（axios）的回调，可以直接对XMLHttpRequest进行改写，但这样做风险很大，并不建议。

（4）组件更换统一组员自己配置路由及监听接口的方式。这里的逻辑可以自行决定，如果要监听的接口多，可以采用黑名单，反之则白名单。

（5）对渲染的优化、请求带参数、路由的模式进行了优化。