Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动

大纲

1.引入`import axios from 'axios'`
2.创建loding函数`Loading.service`，创建计数变量`requestCount = 0`，
3.创建axios实例`const service = axios.create()`
4.请求拦截器`service.interceptors.request.use()`
5.响应拦截器`service.interceptors.response()`
6.优化解决同步接口闪动

1.引入`import axios from 'axios'`及其他

import axios from 'axios';
import { MessageBox, Message, Loading } from 'element-ui';

2.创建loding函数`Loading.service`，添加技术变量

Loading = Loading.service({lock: true,text: '加载中……',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'
});

let requestCount = 0

3.创建axios实例`const service = axios.create()`

const service = axios.create({baseURL: config.BASE_API,timeout: 30000 // 请求超时
});

4.请求拦截器`service.interceptors.request.use()`

service.interceptors.request.use((config) => {requestCount++Loading()// 逻辑……return config}
}

5.响应拦截器`service.interceptors.response()`

service.interceptors.response.use((response) => {requestCount--if(requestCount === 0){Loading.close()}// 逻辑……return response.data}
}

6.优化解决同步接口闪动

说明：以上对于异步接口多接口已经可以有效解决了，但是很多时候在框架封装的时候我们还会遇到多个同步接口的调用情况，由于存在依赖关系就必须一个一个调用，导致出现loding闪现的效果，对于这种情况我们可以使用setTimeout延时解决。

实例：

/*** 思路：* 1.在loding关闭方法添加setTimeout延时处理* 2.在request中进行判断，存在setTimeout值，直接清除setTimeout达到清除操作
*/
let tservice.interceptors.request.use((config) => {requestCount++// 清除setTimeOutif (this.t) clearTimeout(this.t)// lodingLoading()// 逻辑……return config}
}service.interceptors.response.use((response) => {requestCount--if(requestCount === 0){this.t = setTimeOut(()=>{Loading.close()},500)}// 逻辑……return response.data}
}

解析：由上面的方法我们可以看到当要执行关闭loding时，我们添加延时。下一同步接口调用时就会判断是否存在延时，存在就直接清除延时使关闭方法不执行，以此类推，直到没有下一接口调用时，我们才执行关闭。

结束。

Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动相关推荐

Vue 拦截器原理和详细使用
拦截器原理和作用首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
.NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑特性 //特性public class ModelEsi ...
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...
vue拦截器刷新登陆页面_Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器-Go语言中文社区...
前言这一篇主要讲前端路由与登录拦截器的实现.放在一起讲是因为我在开发登录拦截器时因为这个路由的问题遇到了很多坑,花费了很长时间,网上的解决方案都不怎么靠谱,综合了好几种办法才最终成功,其实关于这个部 ...
vue拦截器的使用（萌新怕不懂的看过来）
由于我是第一次使用这个东西,我看到拦截器这个高大上的名字就感觉到害怕,所以做了这么多项目也怕接触这个东西,现在想到接口要进行处理,并且集中放置,所以利用了最近刚学的番茄时钟工作法,开了一个番茄,告诉自 ...
vue拦截器实现统一token,并兼容IE9验证
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...
struts2 在拦截器进行注入（依据Action是否实现自己定义接口）
比如:经常在Action中都须要获取当前登录的User,就须要获取Session.然后从Session获取当前登录的User,由于这些步骤都是反复操作,能够想办法在拦截器中进行实现.能够自己定义一个接 ...
Vue 拦截器的使用
本文转载自: https://www.cnblogs.com/lhl66/p/8022823.html 作者:lhl66 转载请注明该声明. 拦截器可以全局进行拦截器设置.拦截器在发送请求前或响应返 ...
vue拦截器及地址解释
一.获取地址信息 https://www.cnblogs.com/AiMuzi/p/6652825.html window.location 示例: http://www.home.com:8080/ ...

Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动

大纲

1.引入`import axios from 'axios'`及其他

2.创建loding函数`Loading.service`，添加技术变量

3.创建axios实例`const service = axios.create()`

4.请求拦截器`service.interceptors.request.use()`

5.响应拦截器`service.interceptors.response()`

6.优化解决同步接口闪动

Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动相关推荐

最新文章

热门文章

Vue 拦截器 多接口调用 实现唯一loding效果 解决同步接口调用loding闪动

大纲

1.引入import axios from 'axios'及其他

2.创建loding函数Loading.service，添加技术变量

3.创建axios实例const service = axios.create()

4.请求拦截器service.interceptors.request.use()

5.响应拦截器service.interceptors.response()

6.优化解决同步接口闪动

Vue 拦截器 多接口调用 实现唯一loding效果 解决同步接口调用loding闪动相关推荐

最新文章

热门文章

Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动

1.引入`import axios from 'axios'`及其他

2.创建loding函数`Loading.service`，添加技术变量

3.创建axios实例`const service = axios.create()`

4.请求拦截器`service.interceptors.request.use()`

5.响应拦截器`service.interceptors.response()`

Vue 拦截器多接口调用实现唯一loding效果解决同步接口调用loding闪动相关推荐