背景

在前端大型項目開發(fā)中申眼，往往會遇到一個頁面有n個組件谬晕，組件里面又有m個請求宿亡。最后“提交”或者“保存”的時候碑诉，如果請求沒回來彪腔，你提交的數(shù)據(jù)可能都是你在data里定義的默認數(shù)據(jù)。
這時候进栽，明明用戶沒修改相關(guān)模塊德挣，你卻將默認數(shù)據(jù)傳給了后端，導(dǎo)致數(shù)據(jù)庫里存入了錯誤數(shù)據(jù)快毛。

方案

1.寫一個請求類管理器格嗅，來管理網(wǎng)絡(luò)請求
2.請求進行時番挺，loading遮罩整個頁面
3.請求完成時，去除loading屯掖，用戶可正常操作

具體代碼

src/utils/init.js

// 請求狀態(tài)管理類
class RequestState {
    constructor() {
        this.map = {};
        this.callbackMap = {};
    }
    // 初始化 module-模塊名稱 nameList-請求列表
    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 });
            });
        }
    }
    // 獲取某個模塊某個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

<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>測試頁面數(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="無"></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>

效果

不加請求類狀態(tài)管理

4s后點擊提交玄柏，提交的是正常數(shù)據(jù)，符合預(yù)期贴铜。
2s內(nèi)點擊“提交”粪摘，提交的全部是默認數(shù)據(jù)，這顯然不符合預(yù)期绍坝。

1.gif

填加請求類狀態(tài)管理以及v-loading

整個視圖默認被loading罩住徘意。請求4s后全部完成，此時清除loading轩褐，點擊“提交”椎咧。數(shù)據(jù)被正常提交。

1.gif