背景

在前端大型項(xiàng)目開(kāi)發(fā)中，往往會(huì)遇到一個(gè)頁(yè)面有n個(gè)組件，組件里面又有m個(gè)請(qǐng)求。最后“提交”或者“保存”的時(shí)候，如果請(qǐng)求沒(méi)回來(lái)，你提交的數(shù)據(jù)可能都是你在data里定義的默認(rèn)數(shù)據(jù)。
這時(shí)候，明明用戶(hù)沒(méi)修改相關(guān)模塊，你卻將默認(rèn)數(shù)據(jù)傳給了后端，導(dǎo)致數(shù)據(jù)庫(kù)里存入了錯(cuò)誤數(shù)據(jù)。

方案

1.寫(xiě)一個(gè)請(qǐng)求類(lèi)管理器，來(lái)管理網(wǎng)絡(luò)請(qǐng)求
2.請(qǐng)求進(jìn)行時(shí)，loading遮罩整個(gè)頁(yè)面
3.請(qǐng)求完成時(shí)，去除loading，用戶(hù)可正常操作

具體代碼

src/utils/init.js

// 請(qǐng)求狀態(tài)管理類(lèi)
class RequestState {
    constructor() {
        this.map = {};
        this.callbackMap = {};
    }
    // 初始化 module-模塊名稱(chēng) nameList-請(qǐng)求列表
    init(module, nameList, cb) {
        if (this.callbackMap[module]) throw new Error('已經(jīng)存在同名模塊');
        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 });
            });
        }
    }
    // 獲取某個(gè)模塊某個(gè)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;
        }
    }
    // 獲取某個(gè)模塊的所有請(qǐng)求是否完成
    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];
            }
        }
    }

    // 更新某個(gè)模塊某個(gè)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

<template>
    <div id="app" v-loading="loading">
        <Test :model="testData" />
    </div>
</template>

<script>
import Test from './pages/test.vue';
import RequestState from './utils/init';

export default {
    name: 'App',
    components: { Test },
    data() {
        return {
            loading: true,
            testData: {}
        };
    },
    mounted() {
        setTimeout(() => {
            this.testData = {
                name: 'lucien',
                age: '18'
            };
            RequestState.update('App', 'module1', true);
        }, 2000);
        RequestState.init('App', ['module1', 'module2'], (done) => {
            this.loading = !done;
        });
    },
};
</script>

<style lang="scss">
</style>

src/pages/test.vue

<template>
    <div class="main">
        <h1>測(cè)試頁(yè)面數(shù)據(jù)</h1>
        <div class="module1">
            <p>name: {{ model.name }}</p>
            <p>age: {{ model.age }}</p>
        </div>
        <div class="module2">
            <el-input v-model="address" placeholder="無(wú)"></el-input>
            <p>集合: {{ phone }}</p>
        </div>
    </div>
</template>
<script>
import RequestState from '../utils/init';

export default {
    props: {
        model: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            phone: null,
            address: null
        };
    },
    mounted() {
        setTimeout(() => {
            this.phone = '136XXXX4321';
            this.address = 'beijing';
            RequestState.update('App', 'module2', true);
        }, 4000);
    }
};
</script>

<style lang="scss" scoped></style>

效果

不加請(qǐng)求類(lèi)狀態(tài)管理

4s后點(diǎn)擊提交，提交的是正常數(shù)據(jù)，符合預(yù)期。
2s內(nèi)點(diǎn)擊“提交”，提交的全部是默認(rèn)數(shù)據(jù)，這顯然不符合預(yù)期。

1.gif

填加請(qǐng)求類(lèi)狀態(tài)管理以及v-loading

整個(gè)視圖默認(rèn)被loading罩住。請(qǐng)求4s后全部完成，此時(shí)清除loading，點(diǎn)擊“提交”。數(shù)據(jù)被正常提交。

1.gif