简介
fetch-helper是一个轻量级的库，用于简化在JavaScript中使用fetch API所涉及的重复代码。它提供了一些方便的功能，例如对请求参数的序列化处理和对响应的错误处理。在接下来的文章中，我们将会了解fetch-helper的安装方法、如何使用和它的常用功能。
安装
使用npm安装fetch-helper是最简单的方式，只需要运行以下命令：
npm install fetch-helper
然后，在需要使用它的代码中引入它：
import fetchHelper from 'fetch-helper';
如果你不使用构建工具且不想使用npm，则可以在HTML中添加以下代码：
<script src="https://unpkg.com/fetch-helper/dist/fetch-helper.min.js"></script>
这将会直接从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。
fetchHelper.get('/api/package/1')
.then(response => console.log(response))
.catch(error => console.log(error.message));在这个例子中，如果响应的状态码不是2xx，那么fetchHelper.get将会抛出一个Error，Error对象的message属性是HTTP状态码的原因短语（例如："Not Found"或"Internal Server Error"）。
全局设置
fetch-helper提供了一些全局设置，它们能够对所有请求生效。
设置默认的baseURL
默认情况下，fetch-helper的请求URL是相对于当前页面的。但是，如果你希望所有的请求都是相对于一个基本URL进行的，可以使用以下方式：
fetchHelper.defaults.baseURL = 'https://example.com';
这将设置所有请求的baseURL为https://example.com。
设置默认的请求头
你也可以设置默认的请求头，这将会应用到每个请求中。
fetchHelper.defaults.headers.common['Authorization'] = 'Bearer ' + token;
这将设置包含Authorization头的公共请求头，这个头通常用于设置身份验证信息。
拦截器
拦截器是一个强大的功能，它允许你在发送请求之前，请求成功之后，请求失败之后拦截请求和响应。fetch-helper提供了两种拦截器：请求拦截器和响应拦截器。
请求拦截器
请求拦截器可以用于修改请求数据，添加headers等，如下：
fetchHelper.interceptors.request.use(request => {
// 在发送请求之前做些什么
request.headers.common['Authorization'] = 'Bearer ' + token;
request.data.updated_time = Date.now();
return request;
});上面这个例子设置了公共的Authorization请求头，并加入了updated_time数据，以确保在所有请求中都包含这些信息。
为了添加多个请求拦截器，你可以按顺序传递一个数组：
fetchHelper.interceptors.request.use([req => {
//在这里设置第一个请求拦截器
return req;
}, req => {
//在这里设置第二个请求拦截器
return req;
}]);这个例子展示了如何按顺序添加多个请求拦截器。
响应拦截器
响应拦截器可以用于修改响应数据。例如，在所有响应中添加一个共同的属性：
fetchHelper.interceptors.response.use(response => {
// 对响应数据做点什么
response.data['server_time'] = Date.now();
return response;
});你可以添加多个响应拦截器，例如：
fetchHelper.interceptors.response.use([resp => {
//在这里设置第一个响应拦截器
return resp;
}, resp => {
//在这里设置第二个响应拦截器
return resp;
}]);结论
fetch-helper是一个小巧而方便的库，它可以大大简化在JavaScript中使用fetch API所涉及的代码，并提供了许多有用的功能，例如自动序列化请求数据、处理响应错误等。通过拦截器，fetch-helper使得整个程序的请求/响应非常可控。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005567e81e8991b448d34c3