jQuery ajax的请示过快导致html闪屏 -loading闪烁问题

Promise.all()  + Promise.race()  解决方式

解决方式是将 Promise.all() 和 Promise.race() 搭配使用，【但是 loading是一定会显示 】

先利用Promise.race()约束请求在超时时间内返回时就直接渲染，否则就固定展示一段时间的loading动画再渲染数据。

即请求如果没有在 500ms 内返回则固定展示 1500ms 的loading，这样才十分完美
 

function reqData (): void {
  const axiosRequest = ajaxRequest() // 记录请求的状态
  Promise.race([axiosRequest, rejectPromise(500)])
  .then((res) => {
    // 成功意味着请求在固定时间内返回
  })
  .catch((err) => { // 超时，整体变成onrejected，展示loading
    loading.value = true
    console.log(err.message)
    Promise.all([axiosRequest, reolvePromise(1500)])
      .then((res) => { // Promise.all执行结果返回的数组顺序是按传入顺序决定的
        console.log(res[0])
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        loading.value = false
      })
  })
} 

 其他方法

// 接口请求太快导致闪烁问题处理
   function  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请求，第二个参数是毫秒数

 参考：后台接口请求过快导致loading闪烁问题处理_vue3接口响应太快loading闪屏-CSDN博客