本文将介绍如何使用 npm 包 o-fetch，这是一个方便的 HTTP 请求库。它可以帮助我们发出基于 Fetch API 的 HTTP 请求并处理响应。使用 o-fetch，我们可以轻松地处理 JSON 和文本响应类型，并且可以方便地自定义请求选项。
安装 o-fetch
o-fetch 可以直接使用 npm 安装：
npm install --save o-fetch
发送 HTTP 请求
要发送 HTTP 请求，我们需要使用 fetchOptions 对象并将其传递给 oFetch 函数。例如，在我们的应用程序中，我们可以使用以下代码来发送一个 GET 请求：
const { oFetch } = require('o-fetch');
const endpoint = 'https://jsonplaceholder.typicode.com/todos/1';
const method = 'GET';
const fetchOptions = { method };
oFetch(endpoint, fetchOptions)
.then(response => response.json())
.then(jsonData => console.log(jsonData));上面的代码实际上做了两件事情。首先，我们使用 oFetch 函数发起了一个 GET 请求，并指定请求的端点和请求选项。接着，我们使用 .then 连接了两个操作，第一个使用 response.json() 方法将响应转换为 JSON 数据，第二个打印出转换后的数据。
我们还可以使用其他 HTTP 方法，如 POST、PUT、DELETE 等，只需将 method 属性设置为相应的值即可：
-- -------------------- ---- -------
----- - ------ - - -------------------
----- -------- - ---------------------------------------------
----- ------ - -------
----- ------------ - -
-------
----- ----------------
------ ------
----- ------
---
-------- - --------------- ------------------ --
--
---------------- -------------
-------------- -- ----------------
-------------- -- -----------------------上面的代码发送了一个 POST 请求，其中的 body 部分包含 JSON 数据，头部信息指定了数据结构。
处理 HTTP 错误
有时候，我们需要处理响应的错误信息。可以使用 Promise 的 catch 方法实现这一点：
-- -------------------- ---- -------
----- - ------ - - -------------------
----- -------- - --------------------------------------------------------
----- ------ - ------
----- ------------ - - ------ --
---------------- -------------
-------------- -- ----------------
-------------- -- ----------------------
-------------- -- -
---------------------- -------
---上面的代码将尝试通过无效的端点获取数据。由于 URL 是无效的，我们收到了一个错误响应。在此期间，我们在 .catch 方法中处理了错误。
o-fetch 的高级特性
除了基础特性外，o-fetch 还支持一些高级特性，例如：
自定义 fetch
o-fetch 使用 Fetch API 发送 HTTP 请求。如果需要对 Fetch API 进行自定义，则可以使用 fetchMethod 选项。例如，如果您需要使用自己的 fetch 方法，请执行以下操作：
const { oFetch } = require('o-fetch');
const endpoint = 'https://jsonplaceholder.typicode.com/posts/1';
const fetchMethod = myCustomFetch;
const fetchOptions = { method: 'GET' };
oFetch(endpoint, fetchOptions, { fetchMethod })
.then(response => response.json())
.then(jsonData => console.log(jsonData));在上面的代码中，我们使用自定义的 fetch 方法 myCustomFetch，将其作为 fetchMethod 参数传递给 oFetch 函数。
超时选项
如果我们需要设置 HTTP 请求的超时，则可以使用 timeout 选项：
-- -------------------- ---- -------
----- - ------ - - -------------------
----- -------- - ---------------------------------------------
----- ------ - -------
----- ------- - -----
----- ------------ - -
-------
----- ----------------
------ ------
----- ------
---
-------- - --------------- ------------------ --
--
---------------- ------------- - ------- --
-------------- -- ----------------
-------------- -- -----------------------上面的代码设置了一个超时时间为 5 秒。
自定义错误处理
如果需要对 HTTP 响应进行自定义错误处理，则可以使用 onError 选项。例如，如果您需要在获取响应时指定自己的错误消息，可以编写以下代码：
-- -------------------- ---- -------
----- - ------ - - -------------------
----- -------- - --------------------------------------------------------
----- ------ - ------
----- ------------ - - ------ --
----- ------------------- - ---------- -- -
-- ---------------- --- ---- -
----- --- ---------------
- ---- -
----- ---------
-
-
---------------- ------------- - -------- ------------------- --
-------------- -- ----------------
-------------- -- ----------------------
-------------- -- -
---------------------- ---------------
---在上面的代码中，我们定义了 handleErrorResponse 函数，当响应状态为 404 时，在Promise链中抛出错误。在调用 oFetch 时，我们使用 onError 选项将 handleErrorResponse 函数传递给它。最后，我们在 Promise 进行 .catch 时处理错误。
总结
在本文中，我们介绍了如何使用 npm 包 o-fetch 发送 HTTP 请求。我们可以轻松地处理 JSON 和文本响应类型，并且可以方便地自定义请求选项。还介绍了一些高级特性，例如自定义 Fetch API、超时选项和自定义错误处理。使用 o-fetch，我们可以更加轻松地处理 HTTP 请求和响应，让前端开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9c3d1de16d83a66e82