在现代的web开发中，我们经常会用到一种工具，即Fetch API，它是一种建立网络请求的JavaScript接口，使用起来比传统的XMLHttpRequest更加方便和简单。
但是，我们可能会遇到一些Fetch API无法解决的问题，比如在发起请求时需要对请求参数进行一些加工处理，或者需要对返回数据进行统一的处理等。
这时，我们可以使用一个叫做@neorel/fetch-intercept的npm包来帮助我们解决这些问题。
什么是@neorel/fetch-intercept
@neorel/fetch-intercept是一个拦截Fetch API请求和响应的npm包，它可以在请求和响应到达目标之前拦截并对它们进行处理。
具体来说，它可以让我们在向服务器发送请求之前对请求参数进行加工，或者在接收到服务器的响应之后对响应数据进行统一的处理。
使用@neorel/fetch-intercept，我们无需修改原有的Fetch API代码，只需简单地添加一些拦截器，就可以实现所需的功能。
使用@neorel/fetch-intercept
下面我们先来看一下如何使用@neorel/fetch-intercept。
安装@neorel/fetch-intercept
在使用@neorel/fetch-intercept之前，我们需要在项目中安装它。
我们可以使用npm或yarn来安装@neorel/fetch-intercept，命令如下所示：
npm install @neorel/fetch-intercept
或者
yarn add @neorel/fetch-intercept
添加拦截器
在安装好@neorel/fetch-intercept之后，我们就可以开始添加拦截器了。
拦截器的作用是在请求和响应到达目标之前对它们进行处理。我们可以添加多个拦截器，拦截器之间会按照添加的顺序进行执行。
我们可以通过如下代码来添加拦截器：
-- -------------------- ---- -------
------ -------------- ---- --------------------------
-------------------------
-------- -------- ----- ------- -
-- ------------------
-- ---
------ ----- --------
--
--------- -------- ---------- -
-- --------------------
-- ---
------ ---------
-
---在上面的代码中，我们添加了两个拦截器，一个是针对请求的，另一个则是针对响应的。
在请求拦截器中，我们可以对请求的url和config（包含请求参数、请求头等信息）进行处理，最后返回处理后的结果。
在响应拦截器中，我们则可以对服务器返回的响应进行处理，最后返回处理后的结果。
使用Fetch API发送请求
添加拦截器之后，我们就可以使用Fetch API发送请求了。在发送请求时，我们的请求将会被添加的拦截器所拦截并进行处理。
下面是一个简单的使用示例：
fetch('https://api.github.com/users/neorel')
.then(response => response.json())
.then(data => console.log(data));在上面的示例中，我们发送了一个GET请求到GitHub API，获取了用户neorel的信息。
完整示例
下面是一个完整的使用示例，我们在请求之前添加了一个请求参数的拦截器，对请求参数进行了加工处理；在响应之后添加了一个响应数据的拦截器，对响应数据进行了统一的处理。
-- -------------------- ---- -------
------ -------------- ---- --------------------------
-------------------------
-------- -------- ----- ------- -
-- ------------------
---------------------------- - ------- - - ------------------------------------
------ ----- --------
--
--------- -------- ---------- -
-- --------------------
-- -------------- -
----- --- ---------------------------
-
------ ----------------
-
---
--------------------------------------------
---------- -- ------------------
------------ -- --------------------在上面的示例中，我们在请求拦截器中添加了一个请求头，将token信息添加到header中；在响应拦截器中，则对服务器返回的响应进行了统一的异常处理，如果服务器返回的状态码不是200，则抛出一个异常。
总结
使用@neorel/fetch-intercept可以让我们更加方便地对Fetch API的请求和响应进行处理，提高了我们的开发效率。
在实际项目中，我们可以根据自己的需要来添加不同的拦截器，从而实现自己想要的功能。
当然，在使用@neorel/fetch-intercept之前，我们需要充分了解Fetch API的原理和使用方法，这样才能更好地使用@neorel/fetch-intercept。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672da0520b171f02e1ced