Vue复杂模块请求管理v-loading

背景

在前端大型项目开发中，往往会遇到一个页面有n个组件，组件里面又有m个请求。最后“提交”或者“保存”的时候，如果请求没回来，你提交的数据可能都是你在data里定义的默认数据。
这时候，明明用户没修改相关模块，你却将默认数据传给了后端，导致数据库里存入了错误数据。

方案

1.写一个请求类管理器，来管理网络请求
2.请求进行时，loading遮罩整个页面
3.请求完成时，去除loading，用户可正常操作

具体代码

src/utils/init.js

// 请求状态管理类
class RequestState {
    constructor() {
        this.map = {};
        this.callbackMap = {};
    }
    // 初始化 module-模块名称 nameList-请求列表
    init(module, nameList, cb) {
        if (this.callbackMap[module]) throw new Error('已经存在同名模块');
        if (module && Array.isArray(nameList) && nameList.length) {
            this.map[module] = [];
            this.callbackMap[module] = typeof cb === 'function' ? cb : function () {};

            nameList.forEach((item) => {
                this.map[module] = this.map[module].concat({ name: item, status: false });
            });
        }
    }
    // 获取某个模块某个api的情况
    get(module, name) {
        if (this.map[module] && Array.isArray(this.map[module]) && this.map[module].length) {
            const item = this.map[module].find((i) => i.name === name);
            return item.status;
        }
    }
    // 获取某个模块的所有请求是否完成
    done(module) {
        if (Array.isArray(this.map[module]) && this.map[module].length) {
            const isNotDone = this.map[module].some((j) => j.status === false);
            if (!isNotDone) {
                this.callbackMap[module](true);
                delete this.map[module];
                delete this.callbackMap[module];
            }
        }
    }

    // 更新某个模块某个api的情况
    update(module, name, status) {
        if (Array.isArray(this.map[module]) && this.map[module].length) {
            this.map[module].forEach((i) => {
                if (i.name === name) i.status = status;
            });
            this.done(module);
        }
    }
}

export default new RequestState();

src/App.vue

src/pages/test.vue

效果

不加请求类状态管理

4s后点击提交，提交的是正常数据，符合预期。
2s内点击“提交”，提交的全部是默认数据，这显然不符合预期。

1.gif

填加请求类状态管理以及v-loading

整个视图默认被loading罩住。请求4s后全部完成，此时清除loading，点击“提交”。数据被正常提交。

1.gif