简介
fetch-helper是一个轻量级的库，用于简化在JavaScript中使用fetch API所涉及的重复代码。它提供了一些方便的功能，例如对请求参数的序列化处理和对响应的错误处理。在接下来的文章中，我们将会了解fetch-helper的安装方法、如何使用和它的常用功能。
安装
使用npm安装fetch-helper是最简单的方式，只需要运行以下命令：
--- ------- ------------
然后，在需要使用它的代码中引入它：
------ ----------- ---- ---------------
如果你不使用构建工具且不想使用npm，则可以在HTML中添加以下代码：
------- -----------------------------------------------------------------------
这将会直接从CDN中载入fetch-helper。
fetch-helper的使用
fetch-helper是使用Promise的，它返回一个包装好的Promise对象，它是可选的，我们可以使用async/await关键字，也可以使用.then/.catch。
以下是fetch-helper的基本使用方法：
----- ------- - - --------------- ------------------- -- ----- ---- - - ----- --------------- -------- -------- -- -------------------------------- ----- -------- -------------- -- ---------------------- ------------ -- --------------------
这个例子展示了如何使用fetchHelper发送一个POST请求，请求头Content-Type为application/json。
常用功能
参数序列化处理
fetch-helper可以自动处理请求参数的序列化。默认情况下，如果发送数据时，Content-Type设置为application/json，则fetch-helper将使用JSON.stringify来序列化请求数据。如果 Content-Type设置为application/x-www-form-urlencoded，则fetch-helper会使用URLSearchParams。
----- ------- - - --------------- ------------------------------------ -- ----- ---- - - ----- --------------- -------- -------- -- -------------------------------- ----- -------- -------------- -- ---------------------- ------------ -- --------------------
在这个例子中，请求数据被序列化为x-www-form-urlencoded格式而不是JSON格式。如果不提供Content-Type头，则fetch-helper将使用JSON。
响应的错误处理
fetch-helper可以自动处理HTTP错误响应。如果响应的状态码不是2xx，则会抛出一个Error。
--------------------------------- -------------- -- ---------------------- ------------ -- ----------------------------
在这个例子中，如果响应的状态码不是2xx，那么fetchHelper.get将会抛出一个Error，Error对象的message属性是HTTP状态码的原因短语（例如："Not Found"或"Internal Server Error"）。
全局设置
fetch-helper提供了一些全局设置，它们能够对所有请求生效。
设置默认的baseURL
默认情况下，fetch-helper的请求URL是相对于当前页面的。但是，如果你希望所有的请求都是相对于一个基本URL进行的，可以使用以下方式：
---------------------------- - ----------------------
这将设置所有请求的baseURL为https://example.com。
设置默认的请求头
你也可以设置默认的请求头，这将会应用到每个请求中。
---------------------------------------------------- - ------- - - ------
这将设置包含Authorization头的公共请求头，这个头通常用于设置身份验证信息。
拦截器
拦截器是一个强大的功能，它允许你在发送请求之前，请求成功之后，请求失败之后拦截请求和响应。fetch-helper提供了两种拦截器：请求拦截器和响应拦截器。
请求拦截器
请求拦截器可以用于修改请求数据，添加headers等，如下：
-------------------------------------------- -- - -- ----------- --------------------------------------- - ------- - - ------ ------------------------- - ----------- ------ -------- ---
上面这个例子设置了公共的Authorization请求头，并加入了updated_time数据，以确保在所有请求中都包含这些信息。
为了添加多个请求拦截器，你可以按顺序传递一个数组：
----------------------------------------- -- - --------------- ------ ---- -- --- -- - --------------- ------ ---- ----
这个例子展示了如何按顺序添加多个请求拦截器。
响应拦截器
响应拦截器可以用于修改响应数据。例如，在所有响应中添加一个共同的属性：
---------------------------------------------- -- - -- --------- ---------------------------- - ----------- ------ --------- ---
你可以添加多个响应拦截器，例如：
------------------------------------------- -- - --------------- ------ ----- -- ---- -- - --------------- ------ ----- ----
结论
fetch-helper是一个小巧而方便的库，它可以大大简化在JavaScript中使用fetch API所涉及的代码，并提供了许多有用的功能，例如自动序列化请求数据、处理响应错误等。通过拦截器，fetch-helper使得整个程序的请求/响应非常可控。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005567e81e8991b448d34c3