如何使 fetch() 请求超时

亦凉 2023-10-01 19:02 27阅读 0赞

在开发使用网络的应用程序时，要记住的第一条规则是*不要依赖网络*。

网络不可靠，因为 HTTP 请求或响应可能由于多种原因而失败：

*  用户离线
 *  DNS 查询失败
 *  服务器没有响应
 *  服务器响应但出现错误
 *  和更多。

用户可以等待最多 8 秒来完成简单的请求。这就是为什么您需要对网络请求设置超时并在 8 秒后通知用户网络问题。

我将向您展示如何使用`setTimeout()`、中止控制器和`fetch()`API 来发出具有可配置超时时间的请求（包括有趣的演示！）。

### 1. 默认 fetch() 超时 ###

默认情况下，`fetch()`请求在浏览器指示的时间超时。在 Chrome 中，网络请求超时为 300 秒，而在 Firefox 中为 90 秒。

`async function loadGames() {`

`const response = await fetch('/games');`

`// fetch() timeouts at 300 seconds in Chrome`

`const games = await response.json();`

`return games;`

`}`

300 秒甚至 90 秒远远超过用户期望完成一个简单的网络请求。

在[演示][Link 1]中，`/games`URL 被配置为在 301 秒内响应。单击*加载游戏*按钮开始请求，它将在 300 秒时超时（在 Chrome 中）。

### 2. fetch() 请求超时 ###

`fetch()`API 本身不允许以编程方式取消请求。要在所需时间停止请求，您还需要一个[中止控制器][Link 2]。

以下是创建具有可配置超时的请求`fetchWithTimeout()`的改进版本：`fetch()`

`async function fetchWithTimeout(resource, options = {}) {`

`const { timeout = 8000 } = options;`

`const controller = new AbortController();`

`const id = setTimeout(() => controller.abort(), timeout);`

`const response = await fetch(resource, {`

`...options,`

`signal: controller.signal`

`});`

`clearTimeout(id);`

`return response;`

`}`

首先，`const { timeout = 8000 } = options`从对象中提取超时参数（以毫秒为`options`单位）（默认为 8 秒）。

`const controller = new AbortController()`创建一个[中止控制器][Link 2]的实例。该控制器允许您随意停止`fetch()`请求。请注意，对于每个请求，必须创建一个新的中止控制，换句话说，控制器不可重用。

`const id = setTimeout(() => controller.abort(), timeout)`启动计时功能。一段`timeout`时间后，如果计时功能未被清除，`controller.abort()`将中止（或取消）获取请求。

下一行`await fetch(resource, { ...option, signal: controller.signal })`正确启动获取请求。`controller.signal`注意分配给`signal`属性的特殊值：它`fetch()`与中止控制器连接。

最后，`clearTimeout(id)`如果请求完成的速度快于时间，则清除中止计时功能`timeout`。

现在这里是如何使用`fetchWithTimeout()`：

`async function loadGames() {`

`try {`

`const response = await fetchWithTimeout('/games', {`

`timeout: 6000`

`});`

`const games = await response.json();`

`return games;`

`} catch (error) {`

`// Timeouts if the request takes`

`// longer than 6 seconds`

`console.log(error.name === 'AbortError');`

`}`

`fetchWithTimeout()`（而不是 simple `fetch()`）启动一个在时间取消的请求`timeout`\- 6 秒。

如果请求`/games`在 6 秒内未完成，则取消请求并引发超时错误。

您可以使用块`error.name === 'AbortError'`内的表达式`catch`来确定是否存在请求超时。

打开[演示][Link 3]并单击*加载游戏*按钮。请求`/games`超时，因为它需要超过 6 秒。

### 三、总结 ###

默认情况下，`fetch()`请求在浏览器设置的时间超时。例如，在 Chrome 中，此设置等于 300 秒。这比用户期望完成一个简单的网络请求要长得多。

发出网络请求时的一个好方法是将请求超时配置为大约 8 - 10 秒。

如帖子所示，使用`setTimeout()`和中止控制器，您可以创建`fetch()`配置为在您愿意时超时的请求。

检查中止控制器的[浏览器支持][Link 4]，因为截至 2020 年它是一项实验性技术。它还有一个[polyfill][]。

请注意，如果不使用中止控制器，您将无法停止`fetch()`请求。不要使用这样的解决[方案][Link 5]。

*您还知道哪些有关网络请求的其他良好做法？*

喜欢帖子吗？请分享！

[Link 1]: https://codesandbox.io/s/strange-merkle-xqs7n?file=/src/index.html:271-470
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
[Link 3]: https://codesandbox.io/s/stoic-dust-cctin?file=/src/index.html
[Link 4]: https://caniuse.com/?search=abort%20controller
[polyfill]: https://github.com/mo/abortcontroller-polyfill
[Link 5]: https://stackoverflow.com/a/46946573/1894471