直面未知：理解 fetch() 的超时机制，驾驭复杂互联网环境

2023-12-20 02:49:30

当我们使用fetch()请求数据时，难免会遇到网络延迟或服务器响应缓慢的问题，此时，超时机制就显得尤为重要。fetch()方法本身提供了一个timeout属性，可以设置请求的超时时间，当请求超过该时间还未返回结果时，就会自动抛出一个超时错误。

那么，我们该如何控制fetch()请求的超时呢？AbortController和Promise.race()这两个API可以帮助我们轻松实现这一目的。

AbortController是一个用于管理请求的控制器。当我们创建AbortController实例并调用其abort()方法时，与之关联的所有请求都会被终止。这是一种非常有效的控制请求超时的方法。

下面我们来看一下如何使用AbortController和Promise.race()来控制fetch()请求超时：

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

const request = fetch('https://example.com', {
  signal,
});

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

request.then((response) => {
  console.log(response);
}).catch((error) => {
  console.error(error);
});

在这个例子中，我们创建了一个AbortController实例，并使用其创建了一个信号对象。然后，我们将其传递给fetch()作为参数。

当我们使用setTimeout()设置一个5秒的超时时间时，如果在5秒内没有收到服务器的响应，AbortController的abort()方法就会被调用，从而终止fetch()请求。

如果在5秒内收到了服务器的响应，那么fetch()请求就会正常完成，并执行then()方法中的代码。

Promise.race()是一个非常强大的API，它可以接收多个Promise对象，并返回第一个完成的Promise的结果。

我们可以使用Promise.race()来并行执行多个fetch()请求，并使用AbortController来控制这些请求的超时时间。

const controller1 = new AbortController();
const signal1 = controller1.signal;
const request1 = fetch('https://example.com', {
  signal: signal1,
});

const controller2 = new AbortController();
const signal2 = controller2.signal;
const request2 = fetch('https://example.org', {
  signal: signal2,
});

const winner = Promise.race([request1, request2]);

winner.then((response) => {
  console.log(response);
}).catch((error) => {
  console.error(error);
});