关于javascript:如何在请求数据时显示加载动画

为了优化用户体验，咱们心愿对于数据返回比较慢的接口，可能显示一个加载动画，然而在数据返回比拟快的时候咱们又不心愿显示这个动画。上面提供一种形式，来解决这个问题

办法的外围是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没有响应，就显示loadingPromise.race([showUserInfo(), timeout(300)]).then(displayed => {  if (!displayed) showSpinner();});

留神： showUserInfo函数肯定要有返回值，用来通知promise.rece()申请实现

如何在申请数据时，显示加载动画首发于聚享小站，如果对您有帮忙，不要遗记点赞反对一下呦