方案一:
1、请求前肯定是loading开启的,这是前提。
在这个前提之下:
this.loading=true;//开启加载动画
let number=0;
let interval=setInterval(()=>{
number++
},1000)//1000毫秒加一次。
//请求发起。
ajax.post(
){(res)=>{
//此时无论是成功还是其他错误,代码错误除外。都是拿到了返回数据。
//判断上面的number增加到多少了。
if(number>=2){//数字增长到2表示到了2000毫秒(定时器里面1000毫秒增加一次)
this.loading=false;//关闭加载动画
}else{
//如果没增加到2,表示时间还没到2000毫秒就已经拿到数据了。这么快拿到数据loading又不想关闭?那设置一次性定时器在一秒后关闭loading就好啦。
setTimeout(()=>{
this.loading=false;//关闭加载动画
},1000)
// 同时考虑到性能,别忘了关闭上面的循环定时器。
clearInterval(interval)
}
}}
方案二:
// 接口请求太快导致闪烁问题处理
loading(Promise,ms){
const timeout = ms => new Promise((_, reject) => setTimeout(() => reject(Symbol.for('timeout')), ms));
return Promise.race([ajaxPromise, timeout(ms)])
.then((res)=>{return res})
.catch(err => {
if (Symbol.for('timeout') === err) {
// loadin开始
return ajaxPromise
.then((res)=>{return res})
.catch()
.finally(() => {
// loadin结束
});
}
return "";
});
},
loading(promise请求,1000)//第一个参数是promise请求,第二个参数是毫秒数