更多文章

平常情况下，在 vue 中连系 axios 的拦截器掌握 loading 展现和封闭，是如许的：
在 App.vue 设置一个全局 loading。

    <div class="app">
        <keep-alive :include="keepAliveData">
            <router-view/>
        </keep-alive>
        <div class="loading" v-show="isShowLoading">
            <Spin size="large"></Spin>
        </div>
    </div>

同时设置 axios 拦截器。

 // 增添要求拦截器
 this.$axios.interceptors.request.use(config => {
     this.isShowLoading = true
     return config
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

 // 增添相应拦截器
 this.$axios.interceptors.response.use(response => {
     this.isShowLoading = false
     return response
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

这个拦截器的功用是在要求前翻开 loading，要求完毕或失足时封闭 loading。
如果每次只要一个要求，如许运转是没题目的。但同时有多个要求并发，就会有题目了。

举例：

如果如今同时提议两个要求，在要求前，拦截器 this.isShowLoading = true 将 loading 翻开。
如今有一个要求完毕了。this.isShowLoading = false 拦截器封闭 loading，然则另一个要求因为某些缘由并没有完毕。
形成的效果就是页面要求还没完成，loading 却封闭了，用户会认为页面加载完成了，效果页面不能一般运转，致使用户体验不好。

处理方案
增添一个 loadingCount 变量，用来盘算要求的次数。

loadingCount: 0

再增添两个要领，来对 loadingCount 举行增减操纵。

    methods: {
        addLoading() {
            this.isShowLoading = true
            this.loadingCount++
        },

        isCloseLoading() {
            this.loadingCount--
            if (this.loadingCount == 0) {
                this.isShowLoading = false
            }
        }
    }

如今拦截器变成如许：

        // 增添要求拦截器
        this.$axios.interceptors.request.use(config => {
            this.addLoading()
            return config
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error('收集非常，请稍后再试')
            return Promise.reject(error)
        })

        // 增添相应拦截器
        this.$axios.interceptors.response.use(response => {
            this.isCloseLoading()
            return response
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error('收集非常，请稍后再试')
            return Promise.reject(error)
        })

这个拦截器的功用是：
每当提议一个要求，翻开 loading，同时 loadingCount 加1。
每当一个要求完毕， loadingCount 减1，并推断 loadingCount 是不是为 0，如果为 0，则封闭 loading。
如许即可处理，多个要求下有某个要求提前完毕，致使 loading 封闭的题目。