前言
在前端开发中，经常需要从服务器请求数据，而使用 XMLHttpRequest 这种原始 API 实现起来却比较麻烦和复杂。于是， fetch API 诞生了，它更加简单和高效，封装了 XMLHttpRequest 的很多功能。但是，fetch API 也有其一些局限性，比如不能直接获取响应头信息。为了解决这个问题，我们可以使用 npm 包 fetch-extra-core。
fetch-extra-core 简介
fetch-extra-core 是一个 fetch API 的封装，提供了一些额外的功能。比如获取响应头、设置请求头、设置请求超时时间等。其原理就是封装 fetch API，并在其基础上扩展了一些功能。
安装和使用
安装
npm install fetch-extra-core
使用
引入 fetch-extra-core 后，就可以像使用 fetch API 一样使用了。
-- -------------------- ---- -------
------ ---------- ---------- ---- -------------------
------------- --------
-------------- -- -
-- ----
--
------------ -- -
-- ----
---
-------------- ----- --------
-------------- -- -
-- ----
--
------------ -- -
-- ----
---fetch-extra-core 功能详解
获取响应头信息
在使用 fetch API 进行请求时，响应头信息只能通过 response.headers.get() 方法获取，而 fetch-extra-core 提供了更加方便的写法，只需要在选项中设置 getResponseHeader 为 true 就可以了。
fetchGet(url, {
getResponseHeader: true, // 使能获取响应头信息
})
.then(response => {
const contentType = response.headers.get('content-type');
// ...
});设置请求头信息
同样地，在 fetch API 进行请求时，如果需要设置请求头信息，需要在选项中设置 headers。而对于 fetch-extra-core，可以直接在函数参数中传递一个 headers 对象。
-- -------------------- ---- -------
-------------- ----- -
-------- -
--------------- -------------------
-- ---
--
--
-------------- -- -
-- ---
---设置请求超时时间
在 fetch API 中暂时没有提供直接设置请求超时时间的方法，只能自行实现。fetch-extra-core 中提供了直接设置请求超时时间的选择。
-- -------------------- ---- -------
------------- -
-------- ----- -- ------- - -
--
-------------- -- -
-- ---
--
------------ -- -
-- ----------- --- ------------- -
----------------------
- ---- -
----------------------
-
---示例代码
一个完整的示例代码如下：
-- -------------------- ---- -------
------ ---------- ---------- ---- -------------------
-- --- --
--------------------------------------------- -
------------------ ----- -- ---------
--
-------------- -- -
----- ----------- - -------------------------------------
-- ------------- -
------ ----------------
- ---- -
----- --- --------------
-
--
---------- -- -
-- ----
------------------
--
------------ -- -
---------------------
---
-- ---- --
---------------------------------------------- -
----- -----
---- ---
-- -
-------- -
--------------- -------------------
--
--
-------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- --------------
-
--
---------- -- -
-- ----
------------------
--
------------ -- -
---------------------
---
-- ----
----- ---------- - --- ------------------
----- ------ - ------------------
--------------------------------------------- -
-------
-------- ----- -- ------- - -
--
-------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- --------------
-
--
---------- -- -
-- ----
------------------
--
------------ -- -
-- ----------- --- ------------- -
----------------------
- ---- -
----------------------
-
---
-- ----
------------- -- -
-------------------
-- ------总结
fetch-extra-core 包提供了更加方便易用的 fetch API。在日常的前端开发工作中，使用 fetch-extra-core 可以更加方便地完成一些常见操作，提高项目开发效率。希望本文的介绍和示例代码对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4d51ab1864dac66832