vue使用axios请求等待所有请求完成loading消失的4个方法

叁歲伎倆 2023-02-12 08:28 12阅读 0赞

方法1，以事件总线方式创建拦截器，待所有事件请求结束消失loading

创建事件总线：

import Vue from 'vue'
    var _bus = new Vue()  // 创建一个事件总线
    var num = 0
    axios.interceptors.request.use(function (config) {  //在请求发出之前进行一些操作
        num++
        _bus.$emit('showloading')
        return config
      }
    
    axios.interceptors.response.use(response => {        // 接受请求后num--，判断请求所有请求是否完成
        num--
        if (num <= 0) {
          _bus.$emit('closeLoading')      
        } else {
          _bus.$emit('showloading')      
        }
      })
    export var bus = _bus   //暴露事件总线

总线调用：

improt {bus} form xxx.js
    created(){
     var _this = this
     bus.$on('showloading',function(){
        _this.showloading = true    // loading出现
     })
     bus.$on('closeLoading',function(){
        _this.showloading = false   // loading消失
     })
    }

方法2，直接在封装的axios.js中拦截，原理跟方法1一样

let requestingCount = 0;
    
    const handleRequestLoading = () => {
      if (!requestingCount)  startLoading()
      requestingCount++
    }
    const handleResponseLoading = () => {
      requestingCount--
      if (!requestingCount)  stopLoading()
    }
    
    axiosInstance.interceptors.request.use(config => {
        handleRequestLoading()
      },() => {
        handleResponseLoading()
      })
    
    axiosInstance.interceptors.response.use(response => {
        handleResponseLoading()
      }, error => {
        handleResponseLoading()
      })

方法3，使用Promise.all方法调用封装的axios请求

具体如何使用参考[https://blog.csdn.net/weixin\_36185028/article/details/102394378][https_blog.csdn.net_weixin_36185028_article_details_102394378]

方法4，axios.all方法

官方例子：

参考来源：[https://segmentfault.com/q/1010000012271633/][https_segmentfault.com_q_1010000012271633]

[https_blog.csdn.net_weixin_36185028_article_details_102394378]: https://blog.csdn.net/weixin_36185028/article/details/102394378
[https_segmentfault.com_q_1010000012271633]: https://segmentfault.com/q/1010000012271633/