共计 1439 个字符,预计需要花费 4 分钟才能阅读完成。
为了优化用户体验,咱们心愿对于数据返回比较慢的接口,可能显示一个加载动画,然而在数据返回比拟快的时候咱们又不心愿显示这个动画。上面提供一种形式,来解决这个问题
办法的外围是 Promise.race()
,简略回顾下Promise.race
应用办法,Promise.race(iterable)
办法接管一个可迭代对象作为参数,返回一个 promise。迭代器中的某个 promise 解决或回绝,返回的 promise 就会解决或回绝,也就是说谁先有响应就返回谁的后果。
const promise1 = new Promise((resolve, reject) => {setTimeout(resolve, 500, 'promise 1 resolved');
});
const promise2 = new Promise((resolve, reject) => {setTimeout(reject, 100, 'promise 2 rejected');
});
const promise3 = new Promise((resolve, reject) => {setTimeout(resolve, 200, 'promise 3 resolved')
});
(async () => {
try {let result = await Promise.race([promise1, promise2, promise3]);
console.log(result);
} catch (err) {console.error(err);
}
})();
// 输入:promise 2 rejected
// 因为 promise2 最先有响应,所以返回的是 cacth 到的 reject 值
基于此咱们就有了问题的解决思路:通过编写一个 timeout 函数,来判断是接口先有响应还是 timeout 函数先有响应,如果 timeout 先有就阐明须要显示 loading,否则就不须要显示。
// 模仿网络申请
function getUserInfo(user) {return new Promise((resolve, reject) => {setTimeout(() => resolve("user data!"), Math.floor(900*Math.random()));
});
}
// 模仿接口申请
function showUserInfo(user) {return getUserInfo().then(info => {
// 这里解决业务逻辑
console.log(info)
// return 值用来通知 promise.rece()申请实现
return true;
});
}
// loading 函数
function showSpinner() {console.log("please wait...")
}
// 提早函数
function timeout(delay, result) {
return new Promise(resolve => {setTimeout(() => resolve(result), delay);
});
}
// 如果 300ms 后 timeout 没有响应,就显示 loading
Promise.race([showUserInfo(), timeout(300)]).then(displayed => {if (!displayed) showSpinner();});
留神 :showUserInfo 函数肯定要有返回值,用来通知 promise.rece() 申请实现
如何在申请数据时,显示加载动画首发于聚享小站,如果对您有帮忙,不要遗记点赞反对一下呦🎉
正文完
发表至: javascript
2022-02-22