为了提高前端开发效率，开发者经常使用第三方库来帮助我们完成一些常见的任务，这些库被封装成 npm 包供其他开发者使用。perfect-fetch 是一个利用了 axios 库的 npm 包，能够简化请求的发送和响应处理，适用于大多数前端项目。本文将介绍此包的使用方法。
安装
使用 npm 包的第一步是安装它。在命令行中输入以下命令：
npm install perfect-fetch
在安装完毕后，你便可以在你的项目中 import perfect-fetch 了。
基本用法
使用 perfect-fetch 与直接使用 axios 相似。你可以使用其请求方法 GET、POST、PUT、DELETE、PATCH。
-- -------------------- ---- ------- ----- ------- - ---------------------- ------ ------------ ---- ---------------- ----- ------------ - --- ---------------------- -- -- --- -- ----------------------------- -------------- -- --------------------------- ------------ -- ---------------------- -- -- ---- -- ------------------------------ - ----- --------- -- -------------- -- --------------------------- ------------ -- ----------------------
在上面的代码中，我们新建了一个 perfectFetch 对象，并传入了 API_URL。然后我们调用了它的 GET 和 POST 方法，并分别发送了 GET 和 POST 请求。这些请求都返回了 Promise 对象。你可以像上面的示例一样使用 .then() 和 .catch() 方法处理它们的响应和错误。
拦截器
拦截器是一个非常有用的功能，它允许你在请求被发送和响应被处理之前进行一些操作。perfect-fetch 支持两种拦截器：请求拦截器和响应拦截器。
请求拦截器：
-- -------------------- ---- -------
-----------------------------
-------- -
------------ ---------------- -
-- -----
------ -------
--
----------- ----------------
------ ----------------------
-
-
---上面的代码中，我们使用 setInterceptor() 方法设置请求拦截器。它接受一个对象参数，其中包含两个属性：onFulfilled 和 onRejected。onFulfilled 函数会在请求发送之前被调用；onRejected 函数会在请求发送失败时调用。这些函数都返回 config 对象或者错误。
响应拦截器：
-- -------------------- ---- -------
-----------------------------
--------- -
------------ ------------------ -
-- -----
------ ---------
--
----------- --------------- -
------ ----------------------
-
-
---类似于请求拦截器，响应拦截器也接受一个对象参数，并包含了 onFulfilled 和 onRejected 函数。onFulfilled 函数会在成功响应到达之前被调用；onRejected 函数会在响应失败时被调用。
完整示例
完整代码如下：
-- -------------------- ---- -------
----- ------- - ----------------------
------ ------------ ---- ----------------
----- ------------ - --- ----------------------
-- ---------
-----------------------------
-------- -
------------ ---------------- -
---------------------------- - ----------------------------
------ -------
--
----------- --------------- -
------ ----------------------
-
-
---
-- ---------
-----------------------------
--------- -
------------ ------------------ -
-- --------------------- --- -------- -
-----------------------------
------ -------------------------
-
------ --------------------------
--
----------- --------------- -
-- --------------- -- --------------------- --- ---- -
---------------------
-
------ ----------------------
-
-
---
-- -- --- --
-----------------------------
-------------- -- ---------------------------
------------ -- ----------------------
-- -- ---- --
------------------------------ -
----- ---------
--
-------------- -- ---------------------------
------------ -- ----------------------在上面的代码中，我们添加了一个请求拦截器，并在其中设置了 Authorization headers。我们还添加了一个响应拦截器，对不同响应做了不同处理。我们的 GET 和 POST 请求也被保留，并使用了新的拦截器。这个示例说明 perfect-fetch 的各种功能是如何协同工作的。
结语
perfect-fetch 提供了一种轻量且易用的方式，使前端开发人员可以快速发送请求，同时也提供了强大而灵活的拦截器，使得开发人员可以方便地处理请求和响应。希望这篇文章对您有帮助，让您能够更好地使用 perfect-fetch。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b881e8991b448d4c0d