在前端开发中，我们经常需要从API中获取数据，而这个请求和响应的过程需要利用到fetch方法。fetch是原生javascript中的方法，它能够发送异步请求和接收响应。但是，使用fetch也存在一些问题。Neo-fetch是一个依赖于fetch的npm包，它可以增强原生fetch，提供更多丰富的功能和安全性。
安装 Neo-fetch
在终端中输入以下命令可安装Neo-fetch：
npm install neo-fetch
Neo-fetch 概述
Neo-fetch是一个基于Fetch API的库，对Fetch API进行了封装，向外提供了一整套promise based的API，简化了fetch的复杂性，同时在fetch的请求中快速提供了诸如拦截、请求重试、取消请求等需要注意的处理。
Neo-fetch的优点：
- 提供Promise操作：代码更加简洁，易于维护。
- 对Response数据可做多层解构，包括body blob、buffer、text、json。
- 拦截器，可在请求、响应中间做处理。
- 支持请求和响应缓存、超时和自动重试。
Neo-fetch的基本使用
-- -------------------- ---- -------
------ -------- ---- ------------
---------------------------------
--------- -- -
------ -----------
--
---------- -- -
------------------
--
---------- -- -
-----------------
---Neo-fetch对原生fetch进行了封装，使用方法基本相同，返回的也是promise对象。
Neo-fetch配置项
- method：请求方法，默认为GET。
- headers：请求头，默认为空对象。
- body：请求体，默认为空字符串。
- cache：控制浏览器缓存，可以有default、no-cache、reload、force-cache或only-if-cached这几个值，默认为default。
- credentials：授权信息，包含omit、same-origin或include，默认为same-origin。
方法示例：
-- -------------------- ---- -------
-- --- -------- --------
------------------------------------- -
------ -----------
--
--------- -- -----------
---------- -- ------------------
---------- -- ------------------
-- ---- ------- ---- ------- ------
-------------------------------- -
------- -------
-------- -
--------------- -------------------
--------- -------------------
--
----- ----------------
----- ----------
------ ----------------------
---
--
--------- -- -----------
---------- -- ------------------
---------- -- ------------------Neo-fetch拦截器
Neo-fetch拦截器是强大的请求中间件，它允许我们从一个转换器上修改请求数据。
使用示例：
请求时添加公共请求头：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
-------- ---------------- -
---------------------------- - ----------------------------------
------ -------
-
---------------------------
--------------------- -
------- -------
----- -------------------
--
--------- -- -----------------
---------- -- ------------------使用拦截器来自定义响应格式：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------
-------- ------------------------ -
-- ------------- -
------ --------------------------------- -- -
-- ------------------ --- -- -
----- -------------
-
------ -------------
---
- ---- -
----- ----------------
-
-
----------------------------------
---------------------
--------- -- -----------------
---------- -- ------------------Neo-fetch缓存
Neo-fetch支持请求和响应的缓存。我们可以把一些重复的请求缓存起来，然后无须重新请求，直接利用缓存即可。
缓存请求示例：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
-- -----------
-------- --------------------------- -
----- --------- - ------------- - ------------------ - ----------
------ ------------- -- --------- -- ----------------- -- --- ----------------------- -- --- -------
-
-- ---------
-------- ------------------- -
----- ----- - --------------
----- -------- - ----- -- -----------------
----- ------------- - -------------------
-- ----------------------------- -
------------------ ------
------ -------------------------------
-
----- --------------- - ----------------- ---------------- -- --------------------
-- ------ -- --------- -
----------------------------- -- -
----- ------- - --- --------------- - ----------------
------------------ - ----- --------- -------- --------------------- ---
---
-
------ ----------------
-
------------------------------
----- -------- - ---------------------
------------------------------- - ------ ------ --------- -------- ----- --
--------- -- -----------------
---------- -- ------------------缓存响应示例：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------
----- ----- - --- ------
-------- --------------------- -
-- --------------------------------------------------------------------- -- ---------------------------- --- ----------- -
------ -----
-
----- -------- - ---------
----- ----------- - ---------------------------------
----- ------- - --------------------------------
-- --------- -- -------------------- -
------ -------------------------------------
-
----- -------- - --------------------
-- --------- -- -------- -
------------------- ----------
-
------ ---------
-
-----------------------------------
---------------------
--------- -- -----------------
---------- -- ------------------Neo-fetch重试机制
请求在网络环境不好或者服务器异常时，有可能请求会失败。Neo-fetch提供了重试请求的机制，使得请求遇到失效后可以自动重试。
重试请求示例：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
-------- --------------------------- -
--- ---------- - --
--- ---------- - ------
----- - ---- ------- - - -------
-------- --------- -
-------------
-- ----------- - ------------------ -
------ ------------------ -------------- ------ ----- -------------------- ------------
-
------ ---------- -----
--------- -- -
-- ----------- -- --- -- ---------- - ---- -
------ -------------------
-
---------- - -----
------ -----------------------
--
---------- -- -
-- ------------- -
------ ----------
-
------ --------------------
---
-
------ ----------
-
--------------------------------------
--------------------- - ----------- - --
--------- -- -----------------
---------- -- ------------------以上就是本篇关于npm包neo-fetch的介绍以及使用教程的详细说明，希望能对你有所帮助。让我们用neofetch来更加方便、高效和安全的处理请求和响应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737c890c4f7277584175