Promise.all() + Promise.race() solution
The solution is to use Promise.all() and Promise.race() together, [butloading will definitely be displayed]< /span>
First, use Promise.race() to constrain the request to be rendered directly when it returns within the timeout period. Otherwise, the loading animation will be displayed for a fixed period of time and then the data will be rendered.
That is, if the request does not return within 500ms , the display will be fixed for 1500ms The loading is perfect
function reqData (): void { const axiosRequest = ajaxRequest() // Record the status of the request Promise.race([axiosRequest, rejectPromise(500)]) .then((res) => { // Success means the request returns within a fixed time }) .catch((err) => { // Timeout, the whole becomes onrejected, display loading loading.value = true console.log(err.message) Promise.all([axiosRequest, reolvePromise(1500)]) .then((res) => { // The order of the array returned by the Promise.all execution result is determined by the order passed in console.log(res[0]) }) } }) }) loading.value = false .finally(() => { }) console.log(err) .catch((err) => {
Other methods
// 接口请求太快导致闪烁问题处理 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请求，第二个参数是毫秒数