在前端开发中，我们常常需要与后端进行接口交互，而且有时候需要对接口请求或返回进行一些处理。这时候，我们可以使用 npm 包 interceptor 来简化我们的代码。
interceptor 是一个非常小巧的 npm 包，它可以拦截请求和响应，让我们可以在请求或响应被发送或接收时加入自己的逻辑。下面我将详细讲解如何使用 interceptor 进行接口拦截。
安装
使用 npm 可以很方便地安装 interceptor：
npm install interceptor --save-dev
其中，--save-dev 表示将这个包作为开发依赖来安装。
基本使用
interceptor 的基本使用非常简单，只需要在请求或响应的配置中添加一个数组，然后在数组中加入我们需要的拦截器即可。
请求拦截
我们可以使用 interceptor 通过请求拦截器来进行一些行为处理，比如给 API 请求添加 token 等。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- --------------
----- ------------------ - -------------
-------- -------- -- -
------------------------------- - ------- -------
------ -------
--
---
----- ----- - --------------
-------- ----------------------
-------- -----
------------- ---------------------
---
--------------------
---------------- -- -
---------------------------
--
-------------- -- -
---------------------
---在上面的代码中，我们首先引入了 axios 和 interceptor 包。然后，我们使用 interceptor 来创建一个请求拦截器，并将其添加到 axios 实例的 interceptors 配置中。
在请求拦截器中，我们给请求添加了一个 Authorization 头，并设置了一个 token 值。这里的 config 参数即为 axios 发送请求时的配置信息。
最后，我们使用 myApi 这个 axios 实例来发送了一个请求，并在 then 方法中打印了响应数据。如果请求失败，我们将会打印一个 error 消息。
响应拦截
interceptor 也可以通过响应拦截器来进行一些行为处理，比如对响应数据进行二次处理等。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- --------------
----- ------------------- - -------------
--------- ---------- -- -
------------- - ------------------- -- - ---- ------------
------ ---------
--
---
----- ----- - --------------
-------- ----------------------
-------- -----
------------- ----------------------
---
--------------------
---------------- -- -
--------------------------- -- --------------
--
-------------- -- -
---------------------
---在上面的代码中，我们定义了一个响应拦截器，并将其添加到了 axios 实例的 interceptors 配置中。在响应拦截器中，我们针对 response.data 对象进行了二次处理，将其值替换成具体的数据。
注意事项
interceptor 可以同时使用多个拦截器来处理请求和响应。只需要将这些拦截器加入到数组中即可。
在请求和响应拦截器中，我们可以修改 config 对象和 response 对象的任意属性，这将会影响请求和响应的结果。
在使用 interceptor 时，需要注意包的版本。随着包的不断更新，有些接口的使用方式可能会发生改变。
总结
interceptor 是一个非常实用的 npm 包，在前端项目的接口请求和响应处理中能够大大简化我们的代码。通过拦截器，我们可以非常方便地对请求和响应进行处理，从而降低代码的复杂度。希望本文能够对大家学习 interceptor 的使用提供一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77721