多个请求下 loading 的展示与关闭

G9YH 发布于2019-08-23 18:00 / 2969人阅读

摘要：更多文章一般情况下，在中结合的拦截器控制展示和关闭，是这样的在配置一个全局。但同时有多个请求并发，就会有问题了。现在有一个请求结束了。这样即可解决，多个请求下有某个请求提前结束，导致关闭的问题。

更多文章

一般情况下，在 vue 中结合 axios 的拦截器控制 loading 展示和关闭，是这样的：
在 App.vue 配置一个全局 loading。

同时设置 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 关闭的问题。

服务器托管私有云数据的整理与展示关闭展示页大数据互联网时代下的文化与传播大数据下人工智能与心理学的联系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104517.html

如何设计redux state结构

摘要：例如下拉框的显示与关闭。如何设计结构在使用的过程中，我们都会使用的方式，将我们的拆分到不同的文件当中，通常会遵循高内聚方便使用的原则，按某个功能模块页面来划分。为什么使用redux 使用react构建大型应用，势必会面临状态管理的问题，redux是常用的一种状态管理库，我们会因为各种原因而需要使用它。不同的组件可能会使用相同的数据，使用redux能更好的复用数据和保持数据的同步 ...

huangjinnan 2019-08-26 13:44 评论0 收藏0
webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

摘要：简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是和，其它参考插件使用。当时，加载中的提示就会出现。后端返回的数据如上图，并不是所有的字段都是可以进行搜索的字段。 1.前言今天要做的，就是在上一篇文章的基础上，进行功能页面的开发。简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是element-ui和vue-resource，其它参考（vue-...

Yumenokanata 2019-08-20 17:47 评论0 收藏0
CancelToken与interceptors实现请求取消

摘要：二项目的实现方式取消请求取消前一个请求保存当前请求如果被拦截，则不处理业务逻辑区分请求返回的错误信息，如果是取消请求导致的，则一直处于状态，如果返回错误信息，则关闭显示未查到相关数据。一、开发过程中，经常会碰到这样的业务场景：多次触发查询按钮时，取消其他查询请求，只保留最后一个。如果涉及到图表展示的，逻辑会稍需要一些处理，比如点击查询，显示loading，请求回来后，有数据则展示数据...

anonymoussf 2019-08-26 13:45 评论0 收藏0
[翻译]Service workers：PWA背后的英雄

摘要：如果返回的被拒，另一个同步事件被自动地开始重试操作，直到返回一个成功状态的。推送机制使得服务器能够向发送信息，然后将信息展示给用户才是消息通知。然后它们可以发送消息通知，或者是更新的状态。原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...

snifes 2019-08-22 14:48 评论0 收藏0
[翻译]Service workers：PWA背后的英雄

摘要：如果返回的被拒，另一个同步事件被自动地开始重试操作，直到返回一个成功状态的。推送机制使得服务器能够向发送信息，然后将信息展示给用户才是消息通知。然后它们可以发送消息通知，或者是更新的状态。原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...

沈建明 2019-08-05 18:00 评论0 收藏0