前言
在开发现代 Web 应用程序时，可能需要从远程服务器获取数据。这里我们就需要使用到fetch API。但是，使用 fetch 可能会比较麻烦。因此，人们已经开发了 fetchex 这样一个npm 包来解决这个问题。这个包可以让你更容易地使用 fetch。
在本篇文章中，我们将介绍 fetchex 的使用方法，以及它如何为你简化 fetch API 的使用。
安装 fetchex
要使用 fetchex，你首先需要安装它。在终端中输入以下命令来安装 fetchex：
npm install fetchex --save
使用 fetchex
安装了 fetchex 之后，你就可以在你的 JavaScript 文件中使用它了。
基础使用
首先，让我们看看如何使用 fetchex 来获取一条数据。
import { api } from 'fetchex';
api('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));这里的 api 函数是 fetchex 的一个方法，它的作用和 fetch 函数类似。fetchex 的优点是，不需要手动解析响应，它会自动把 JSON 数据转换成 JavaScript 对象。除此之外，它还可以处理错误。
使用方法
fetchex 的 api 方法接受两个参数：
url：请求 URL；options：可选的选项对象，可以包括方法 (method), 头部 (headers), 模式 (mode), 缓存模式 (cache), 授权 (credentials) 和内容 (body) 等信息。
让我们看一下如何将选项传递给 fetchex：
-- -------------------- ---- -------
------------------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ------
----- ------
------- -
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------上述代码中，我们通过传递选项对象来指定 POST 请求。这里我们定义了 headers 和 body。
结束请求
在使用 fetchex 时，一定要记得调用 response 的 text() 或 json() 或者 blob() 方法来读取响应，否则请求永远不会结束。
由于 fetchex 为我们自动解析响应，并将数据转换为 JavaScript 对象，因此我们一般使用 json() 方法。
处理错误
当服务器返回错误或者网络发生错误时，fetchex 将为你抛出一个异常。你可以通过 catch() 方法来捕获这个异常。
-- -------------------- ---- -------
-------------------------------------------------- -
------- -----
--
-------------- -- ----------------
---------- -- ------------------
------------ -- -
-- ------ ---------- ---------- -
-------------------- --------
- ---- -
---------------------
-
---借助拦截器实现类似 Axios 的响应返回方式
fetchex 的 then() 方法只会处理成功的响应，而忽略响应中的错误。因此，如果需要对响应进行分类处理，就需要使用拦截器。
这里我们通过一个简单的示例来理解拦截器的使用。示例代码如下所示：
-- -------------------- ---- -------
------ - ---- ------------------- - ---- ----------
------------------------
---------- -- -
-- ---------------- --- ---- -
-----------------------------
-- ------ ---------------- -------- -------- ------ ---
----- --- ----------------------
- ---- -
------ --------------------------
-
--
------- -- ---------------------
--
-------------------------------------------------- -
------- ------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- -
---------------------
---在这个示例中，我们通过 responseInterceptor 来添加拦截器。use() 方法接受两个参数：成功处理和错误处理的函数。成功处理函数用于处理成功的响应，而错误处理函数则用于处理服务器返回的错误。
在成功处理函数中，我们可以通过 response 对象的状态码来进行相应的处理。例如，如果状态码为 401，则抛出异常使 Promise 进入状态为 rejected。
总结
本文介绍了 npm 包 fetchex 的使用方法。我们了解了如何发送 GET 和 POST 请求，以及如何通过拦截器实现类似于 Axios 的响应返回方式。如果您想更好地使用 fetch API 来获取数据，那么 fetchex 值得一试。
如果你想尝试 fetchex，可以参考官方文档进行深入了解。 link: https://www.npmjs.com/package/fetchex
希望本篇文章对你有所帮助，如果有疑问或者觉得有不同的看法可以通过评论区留言和作者进行互动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591381e8991b448d6828