后台接口请求过快导致loading闪烁问题处理

方案一: 

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请求,第二个参数是毫秒数

你可能感兴趣的:(ajax,ajax)