让你的代码不会因为请求缓慢或网络连接问题而崩溃

在JavaScript中实现超时处理有多种方法：

• 使用setTimeout()函数：

fetch(url)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

setTimeout(() => {
  console.error('Request timed out');
}, 5000);

• 使用AbortController()：

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

setTimeout(() => {
  controller.abort();
}, 5000);

• 使用fetch()的timeout属性：

fetch(url, {
  timeout: 5000
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

选择哪种方法取决于你的具体情况。

setTimeout()函数是最简单的方法，但它也有一个缺点：它无法取消请求。如果请求已经发送，即使你使用setTimeout()函数设置了超时，请求仍然会继续执行。

AbortController()可以取消请求，但它需要在fetch()函数中使用。这意味着你必须在代码中显式地创建AbortController()对象和signal对象。

fetch()的timeout属性是最方便的方法，因为它不需要你创建任何额外的对象。然而，它只在某些浏览器中可用。

无论你选择哪种方法，超时处理都是防止你的代码因为请求缓慢或网络连接问题而崩溃的一个好方法。