如何为fetch编写超时逻辑：link1超3秒则调用link2

你原来的代码里if()没有任何判断条件，完全没实现超时检测的逻辑，所以根本没法触发切换到第二个请求的逻辑。要实现超时终止请求并切换，得用AbortController结合Promise.race来做，这是目前标准的处理fetch超时的方式。

完整实现代码 #

const requestOptions = {
  // 填入你的请求配置，比如API密钥等
  headers: { 'apikey': '你的API密钥' }
};

// 创建AbortController实例，用于终止请求
const controller = new AbortController();
const signal = controller.signal;

// 设置3秒超时定时器
const timeoutId = setTimeout(() => {
  controller.abort(); // 超时后终止第一个请求
}, 3000);

// 用Promise.race同时监听请求和超时事件
Promise.race([
  fetch('https://api.apilayer.com/exchangerates_data/latest?base=USD', { ...requestOptions, signal })
    .then(response => {
      if (!response.ok) throw new Error('主请求响应异常');
      return response.json();
    })
    .then(data => {
      clearTimeout(timeoutId); // 请求成功，清除超时定时器
      console.log('主请求返回数据:', data);
      // 在这里处理主请求的结果
    }),
  new Promise((_, reject) => setTimeout(() => reject(new Error('请求超时')), 3000))
])
.catch(error => {
  // 判断是否为超时或请求被终止的情况
  if (error.name === 'AbortError' || error.message === '请求超时') {
    console.log('主请求超时，切换到备用链接');
    fetch('https://api.apilayer.com/fixer/latest?base=USD', requestOptions)
      .then(response => {
        if (!response.ok) throw new Error('备用请求响应异常');
        return response.json();
      })
      .then(data => {
        console.log('备用请求返回数据:', data);
        // 在这里处理备用请求的结果
      })
      .catch(err => console.log('备用请求出错:', err));
  } else {
    // 处理主请求的其他错误
    console.log('主请求出错:', error);
  }
});

关键逻辑说明 #

• AbortController：浏览器原生API，通过signal参数绑定到fetch请求，调用controller.abort()可直接终止该请求。
• Promise.race：同时监听主请求和超时Promise，哪个先完成就执行对应的逻辑。
• 超时处理：3秒后若主请求未完成，定时器触发终止请求，同时触发超时错误捕获逻辑，切换到备用请求。
• 成功清除定时器：主请求成功后立即清除超时定时器，避免后续误终止操作。

内容的提问来源于stack exchange，提问作者Naveen Devang