为了优化用户体验，我们希望对于数据返回比较慢的接口，能够显示一个加载动画，但是在数据返回比较快的时候我们又不希望显示这个动画。下面提供一种方式，来解决这个问题
方法的核心是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()请求完成
如何在请求数据时，显示加载动画首发于聚享小站，如果对您有帮助，不要忘记点赞支持一下呦🎉
