在前端开发中，我们经常需要从后端服务器获取数据。而使用 Fetch API 可以很轻松地实现前端向后端发送请求，得到相应的数据。但是，从浏览器端（即 window）进行 Fetch 操作时，实现起来并不是那么容易，这是因为 Fetch API 并不是所有浏览器都支持。在这种情况下，一个方便的方法是使用 window-fetch 这个 npm 包来通过浏览器端实现网络请求操作。本篇文章将为你讲解 npm 包 window-fetch 的使用教程。
安装和导入 window-fetch
首先，我们需要将 window-fetch 包安装在我们的项目中。在终端中进入项目文件夹，输入以下命令安装：
npm install window-fetch
安装完成后，我们需要将 window-fetch 导入到我们的项目中。可以使用以下语句进行导入：
import windowFetch from "window-fetch";
发送网络请求
接下来，我们可以通过使用 windowFetch() 函数发送网络请求。该函数需要至少两个参数：
- 请求 URL，必须为字符串类型。
- 请求配置对象，至少需要包含一个 method 属性表示请求类型（如 GET 或 POST），建议使用对象类型进行配置。
以下是一个使用 windowFetch() 函数发送 GET 请求的示例代码：
windowFetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});代码解析：
- 通过 windowFetch() 函数发送 GET 请求，请求的 URL 为 https://jsonplaceholder.typicode.com/users。
- 配置对象中 method 属性的值为 GET，表示发送 GET 请求。
- 在 then() 中我们解析响应，先将响应的 body 转换为 JSON 对象，接着打印出转换的 JSON 对象。
POST 请求
如果我们要发送 POST 请求，只需要在配置对象中将 method 属性的值改成 POST，并在 body 属性中添加需要发送的数据即可。以下是一个简单的使用 windowFetch() 函数发送 POST 请求的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -----
--
----- ------- - -
------- ------- -- -- -----
-------- -
--------------- ------------------
--
----- --------------------
--
--------------------------------------------------------- --------
------------------------ -
------ ----------------
--
-------------------- -
------------------
---代码解析：
- 定义一个名为 user 的对象，用于 POST 请求发送的 body 内容。
- 创建一个配置对象 options，其中 method 属性的值为 POST，headers 属性的值表示传送的数据类型为JSON，body 属性的值表示 POST 请求的内容。
- 通过 windowFetch() 函数发送 POST 请求，请求的 URL 为 https://jsonplaceholder.typicode.com/users，配置对象为 options。
- 等待服务器响应后，解析响应的 json 数据并打印出来。
错误处理
当你在发送网络请求时，一些错误可能会发生。这个时候，你需要以一种优雅的方式来处理这些错误。以下是一个使用 windowFetch() 函数进行错误处理的示例代码：
-- -------------------- ---- -------
--------------------------------------------------------------- - ------- ----- --
------------------------ -
-- -------------- -
----- --- ---------------------------
-
------ ----------------
--
-------------------- -
------------------
--
---------------------- -
-------------------
---代码解析：
- 通过 windowFetch() 函数发送 GET 请求，请求 URL 错误，这里 purposely 错误以便展示错误处理方式。
- 如果响应状态码不符合预期，则抛出一个错误。
- 解析 JSON 数据并将其打印出来。
- 捕获可能出现的错误并打印出来。
结论
学习了本文所述内容之后，你应该可以使用 window-fetch npm 包来实现在浏览器端进行网络请求的操作。此外，在使用 Fetch API 进行网络请求时经常会遇到的跨域问题，使用 window-fetch 可以解决。
如果你想更深层次地学习 Fetch API，在 JavaScript 中使用流行的 AJAX 库（如 Axios 或 jQuery AJAX）进行网络请求，这些库也使用 XMLHttpRequest 对象来实现网络请求。无论你使用 Fetch API 或 AJAX 库，你都需要了解异步编程的实践，Promise 和 XMLHttpRequest 的工作方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734b890c4f7277583770