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

Posted 2022-12-13 骑着代马去流浪

方法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

let p1 = new Promise((resolve, reject) => 
    resolve(1);
)
let p2 = new Promise((resolve, reject) => 
    resolve(2);
)
let p3 = new Promise((resolve, reject) => 
    resolve(3);
)
Promise.all([p1, p2, p3]).then(values =>  
    console.log(values); 
);

方法4，axios.all方法

官方例子：

function getUserAccount() 
return axios.get('/user/12345');


function getUserPermissions() 
return axios.get('/user/12345/permissions');


axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) 

// Both requests are now complete
));

 

参考来源：https://segmentfault.com/q/1010000012271633/