在前端开发中，我们经常需要向服务器请求数据。传统的方式是使用 XMLHttpRequest 对象，它有很多的限制，比如不能跨域请求、只能在主线程中使用等。而且 JavaScript 是单线程执行的，当 XMLHttpRequest 发送请求时，主线程会被阻塞。这给用户带来了不好的体验。
为了解决这些问题，可以使用 Web Workers 来发送请求。Web Workers 是官方推荐的在浏览器端使用多线程的方式之一，它允许我们在后台线程中运行 JavaScript 代码，从而避免了阻塞主线程的问题。
在这篇文章中，我们将介绍一个很好用的 npm 包 fetch-worker，它是基于 Web Workers 和 fetch API 实现的，可以在后台线程中发送网络请求，从而避免阻塞主线程，同时允许跨域请求。
安装
fetch-worker 可以通过 npm 安装，只需要在命令行中执行：
--- ------- ------------
使用
使用 fetch-worker 发送网络请求非常简单，只需要调用 fetch 方法即可。下面是一个示例：
------ ----------- ---- --------------- ----- ------ - --- -------------- ------------------------------------------------------------ -------------- -- ---------------- ------------ -- -------------------- ------------ -- ----------------------
在上面的代码中，我们首先导入了 fetch-worker，然后创建了一个 FetchWorker 对象。该对象有一个 fetch 方法，它的用法与 fetch API 相同，可以接受一个 URL，也可以接受一个 Request 对象。之后我们只需要在该方法中传入 URL 或 Request 对象，就可以发送网络请求了。
请注意，在使用 fetch-worker 时，我们不需要关心 Web Workers 的创建和销毁，fetch-worker 会自动管理 Web Workers 的生命周期。
配置选项
fetch-worker 支持许多的配置选项，你可以在创建 FetchWorker 对象时传入这些选项。下面是一些常用的选项：
workerUrl：Web Worker 的 URL。当传入该选项时，fetch-worker 会使用该 URL 创建 Web Worker，而不是使用默认的 URL。一般情况下，我们没有必要使用该选项。timeout：超时时间，单位是毫秒。当请求在该时间内没有响应时，fetch-worker 会中止请求，并返回一个错误。默认为 0，表示没有超时时间。headers：请求头。可以传入一个对象，该对象的键值对表示请求头的键值对。默认值为{}。method：请求方法。默认为 GET。body：请求体。可以传入一个字符串或 FormData 对象。默认为 undefined。
下面是一个传入了常用选项的示例：
----- ------ - --- -------------
-------- -----
-------- -
--------------- -------------------
---------------- ------- ----
--
------- -------
----- ---------------- ----- ------ ---- -- --
---错误处理
在使用 fetch-worker 发送网络请求时，有可能会出现错误，比如请求超时、网络错误等。fetch-worker 会抛出异常，我们需要使用 try-catch 语句来捕获这些异常。下面是一个示例：
--- - ----- -------- - ----- ------------------------------------------------------------- ----- ------ - ----- ---------------- -------------------- - ----- ------- - --------------------- -
总结
fetch-worker 是一个优秀的 npm 包，它可以让我们在 Web Workers 中发送网络请求，从而避免了阻塞主线程的问题，同时允许跨域请求。使用 fetch-worker 很简单，只需要调用 fetch 方法即可。fetch-worker 还提供了很多的配置选项，使我们可以根据自己的需求进行设置。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600556d481e8991b448d3abd