前言
在前端开发中，我们经常会发起网络请求获取数据。而 fetch API 是一个比较常用的实现这一需求的工具。然而，原生的 fetch API 存在一些使用上的不便，例如不能直接设置请求的超时时间，需要手动处理 response 状态码等等。为了解决这些问题，我们可以使用 fetch-extended 包。
介绍
fetch-extended 是一个封装了原生 fetch API 的 npm 包，它在原生的基础上新增了一些功能，例如请求超时、统一处理 response 状态码等等。同时，fetch-extended 也拥有良好的兼容性，支持主流的浏览器和 Node.js 等环境。
安装
使用 npm 命令即可安装 fetch-extended：
--- ------- --------------
使用
fetch-extended 的使用和原生 fetch API 几乎一致，只需要将原本的 fetch() 方法替换为 fetch-extended() 即可。下面我们来分别介绍 fetch-extended 的几个常用功能。
请求超时
使用 fetch-extended 可以方便地实现请求超时的功能。只需要在 fetch-extended() 方法中传入一个超时时间参数即可：
------ - ---------------- - ---- ----------------- -- -- -------------- -- ---- - ------ --- -- ---------------------------------------------------------------- - -------- ----- ------- ----- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
统一处理
fetch-extended 可以方便地统一处理 response 状态码，使得我们可以在一处处理所有常见的错误类型。这在某些情况下可以方便我们快速定位问题所在。只需要使用 fetchWithHandlers() 方法即可：
------ - ----------------- - ---- ----------------- -- -- --------------
-- ------
----- ------------ - ---------- -- -
-- ---------------- --- ---- -
----- --- ---------- --------
-
------ ----------------
--
-- -----------
--------------------------------------------------------------------- -
--------- -
---- ------------
-
--
---------- -- ------------------
------------ -- ----------------------支持自定义请求头
fetch-extended 也支持自定义请求头，只需要在 fetchWithHeaders() 方法中传入 headers 参数即可：
------ - ---------------- - ---- ----------------- -- -- -------------- -- ----------- --- -- ---------------------------------------------------------------- - -------- - ---------------- ------- ----- -- ------- ----- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
总结
fetch-extended 是一个非常实用的工具，它在原生 fetch API 的基础上新增了一些实用的功能，方便我们在开发中快速处理一些常见问题。在实际开发中我们可以根据需要选择使用 fetch-extended 以提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d730d0927023822db7