在 Web 开发中，我们经常需要向服务器发送请求获取数据。在浏览器端，我们通常使用 Fetch API 或 XMLHttpRequest 对象来实现这一目的。然而，在一些情况下，网络连接可能会因为某些原因中断，这时候我们需要重新发起请求。这就需要一个能够自动重试的工具。fetch-on-connect 就是这样一个工具。
fetch-on-connect 是一个基于 Fetch API 实现的 npm 包。它可以帮助我们在浏览器端自动重试请求，以应对网络连接的中断等问题。本文将介绍如何使用 fetch-on-connect。
安装
要使用 fetch-on-connect，我们首先需要在项目中安装它。可以使用 npm 或 yarn 安装：
npm install fetch-on-connect --save
或
yarn add fetch-on-connect
用法
安装完成后，我们就可以在项目中使用 fetch-on-connect 了。使用 fetch-on-connect 和普通的 Fetch API 几乎没有区别。只需要在请求的选项中加入 retry 属性，就可以开启自动重试功能。比如：
-- -------------------- ---- -------
------ -------------- ---- -------------------
----------------------------------------------- -
------ -
------ --
--------- -----
--
--
-------------- -- -
----------------------
--
------------ -- -
---------------------
---上面的例子中，我们设置了重试次数为 3 次，并且每次重试的时间间隔为 2 秒。如果请求失败，fetch-on-connect 会自动发起重试，直到达到重试次数的上限或者请求成功为止。
除了 retry 属性之外，fetch-on-connect 还提供了其他一些选项，可以帮助我们更好地控制请求的行为。比如，我们可以使用 delay 属性来设置每次重试的时间间隔，使用 timeout 属性来设置请求超时时间等等。具体使用方式可以参考官方文档。
注意事项
使用 fetch-on-connect 时需要注意以下几点：
fetch-on-connect 需要与 Fetch API 一起使用。对于不支持 Fetch API 的浏览器和 Node.js，不能使用 fetch-on-connect。
fetch-on-connect 重试时会重新发起请求，这可能会对服务器带来额外的负担。因此，在使用 fetch-on-connect 时需要合理设置重试次数和时间间隔，避免对服务器造成过大的压力。
fetch-on-connect 可能会导致请求的返回时间变长。因为每次请求失败后都需要等待一定的时间再发起重试。因此，在使用 fetch-on-connect 时需要注意这一点，避免对用户体验造成负面影响。
总结
fetch-on-connect 是一个能够帮助我们在浏览器端自动重试请求的工具。它可以应对网络连接的中断等问题，提高请求的可靠性。在使用 fetch-on-connect 时需要注意合理设置选项，避免对服务器和用户体验造成不良影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661381e8991b448e1f4c