vue项目优化—vue等所有接口都请求完成,再隐藏loading

这里分享一个通用方法,vue,react等,几乎所有前端项目都可以使用这个思路。

只贴关键代码!!

let requestCount = 0  // 统计发起请求的接口数量
http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
  requestCount++   // 开始累加数量

  uni.showLoading({
    title: "加载中",
    mask: true,
  });

  return config
})

http.interceptor.response(async (response) => { /* 请求之后拦截器 */
  //  这里是成功回调
  requestCount--  // 开始递减数量

  if (requestCount == 0) {
		uni.hideLoading()
		requestCount = 0
  }
  return response
}, (response) => {
  requestCount--
  //  这里是失败回调
  if (requestCount == 0) {
		uni.hideLoading()
		requestCount = 0
  }
  
  return response
})

---------------------------------------   END   ---------------------------------------

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 中,可以利用 axios 拦截器来实现在请求完成之前显示 Loading 动画。以下是一个简单的示例: ```html <template> <div> <div v-if="loading" class="loading"> <!-- 这里可以插入你想要的加载动画 --> Loading... </div> <div v-else> <!-- 这里是页面主体内容 --> <!-- 可以在这里放置你想要展示给用户的内容 --> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { loading: false, // 初始化时设置为 false }; }, mounted() { axios.interceptors.request.use(config => { this.loading = true; // 请求开始时显示 Loading 动画 return config; }, error => { this.loading = false; // 请求出错时隐藏 Loading 动画 return Promise.reject(error); }); axios.interceptors.response.use(response => { this.loading = false; // 请求完成隐藏 Loading 动画 return response; }, error => { this.loading = false; // 请求出错时隐藏 Loading 动画 return Promise.reject(error); }); }, }; </script> <style> .loading { /* 这里可以添加一些样式,比如居中显示 */ text-align: center; font-size: 24px; margin-top: 100px; } </style> ``` 在上面的代码中,我们引入了 axios,并通过 axios.interceptors.request 和 axios.interceptors.response 来创建请求拦截器和响应拦截器。在请求开始时和请求出错时,会将 loading 变量设置为 true,显示 Loading 动画。在请求完成时,会将 loading 变量设置为 false,隐藏 Loading 动画。这样就可以在请求完成之前显示 Loading 动画了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值