请求多个接口一个loading，多个接口请求完成关闭loading

最新推荐文章于 2024-06-29 15:49:13 发布

牵着蚂蚁去散步。

最新推荐文章于 2024-06-29 15:49:13 发布

阅读量2.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/weixin_50900024/article/details/125781302

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 Vue 的 Element-UI 的 Loading 实现了一个简单的请求拦截器和响应拦截器，通过 count 变量记录接口调用量，并在所有接口请求完成后关闭 loading 动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义一个 count 用来记请求了几个接口
在（请求拦截器）中让 count++ 加几个就说明请求了几个接口
在（响应拦截器）中让 count- - 当减到0 之后就是说，接口全部请求完成了，清除loading

import {Loading} from 'element-ui'
let loadingInstance = null;
var count = 0;


// 添加请求拦截器
Service.interceptors.request.use((config) => {

  count ++   

   loadingInstance = Loading.service({
      lock: true,
      text: 'loading...'
   })
  
  return config
})
// 添加响应拦截器
Service.interceptors.response.use((response) => {

  count--  
  
  if(count == 0){ 
    loadingInstance.close()
  }
  return response.data
}