今天解决项目bug时遇到个问题: 接口请求成功,但是页面就是没数据。

排查的发现 promise.race竞速超时导致

Promise.race

返回第一个被决议(无论是成功还是失败)的 Promise 的结果

特征表现

  • 第一个改变状态(resolvereject)的 Promise 会决定 Promise.race 的结果。

  • 无论是成功(resolve)还是失败(reject),只看哪个先完成

  • 只有第一个决议的 Promise 的结果会被返回,其他的会被丢弃。

接口超时

const fetchData = new Promise((resolve) => setTimeout(resolve, 300, 'Data loaded'));
const timeout = new Promise((_, reject) => setTimeout(reject, 200, 'Request timed out'));

Promise.race([fetchData, timeout])
  .then((value) => {
    console.log('Race resolved with:', value);
  })
  .catch((error) => {
    console.error('Race rejected with:', error); // 输出: "Race rejected with: Request timed out"
  });