利用fetch实现请求超时功能以及fetch和ajax的区别

// 使用fetch实现请求超时功能
function fetchWithTimeout(url, options, timeout = 3000) {
  const timeoutId = setTimeout(() => {
    console.log('请求超时');
    // 清理已经发起的fetch请求
    abortController.abort();
  }, timeout);
 
  const abortController = new AbortController();
  options.signal = abortController.signal;
 
  return fetch(url, options).finally(() => clearTimeout(timeoutId));
}
 
// 示例使用
fetchWithTimeout('https://api.example.com/data', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' }
}).then(response => {
  if (!response.ok) {
    throw new Error('网络请求失败');
  }
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

这段代码定义了一个fetchWithTimeout函数，它接收一个URL、请求选项和超时时间作为参数。它使用setTimeout来设置一个超时，并在超时发生时中断fetch请求。这是通过使用AbortController实现的，这是一个实现fetch cancellation point的标准方法。如果请求在规定的时间内完成，fetch 调用会正常返回；如果超时，请求会被中止，并且会清除相关的定时器。这是一个实现请求超时功能的简洁例子。