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