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 t
service.interceptors.request.use(
(config) => {
requestCount++
// 清除setTimeOut
if (this.t) clearTimeout(this.t)
// loding
Loading()
// 逻辑……
return config
}
}
service.interceptors.response.use(
(response) => {
requestCount--
if(requestCount === 0){
this.t = setTimeOut(()=>{
Loading.close()
},500)
}
// 逻辑……
return response.data
}
}
解析:由上面的方法我们可以看到当要执行关闭loding
时,我们添加延时
。下一同步接口调用时就会判断是否存在延时
,存在就直接清除延时
使关闭方法不执行
,以此类推,直到没有下一接口调用时,我们才执行关闭
。
结束。