Fetch API 是 JavaScript 中最常用的 HTTP 请求方式之一。它允许您简单高效地从服务器发送和接收数据。虽然它已在基于浏览器的应用程序中使用,但 Node.js 的最新更新引入了对 Fetch API 的实验性支持,因此您可以编写服务器端代码而无需依赖第三方库。
这篇文章将向您展示如何使用 Node.js 中的 Fetch API 发出 HTTP 请求。无论您需要发出 GET 或 POST 请求、处理标头,还是将 Fetch API 与 Axios 进行比较,这篇文章都将帮助您入门。让我们开始吧!
目录
- 为什么要使用 Fetch API 进行 HTTP 请求?
- 在 Node.js 中设置 Fetch API
- 使用 Fetch API 发出 GET 请求
- 在 Fetch API 中处理响应标头
- 使用 Fetch API 发送 POST 请求
- Fetch API 中的错误处理
- Fetch API 与 Axios:主要区别
- 总结
- 常见问题
为什么要使用 Fetch API 进行 HTTP 请求?
Fetch API 是一种使用 JavaScript 发出 HTTP 请求的现代而灵活的方法。它简化了使用承诺与 API 和服务器通信的过程,并使您的代码更简洁、更易于维护。

以下是开发人员喜爱 Fetch API 的一些原因:
现代 JavaScript 的内置支持
所有浏览器都支持 Fetch API,从 Node.js 17.5 开始,服务器端 JavaScript 也支持该 API。无需 Axios 或 node-fetch 等第三方库。基于承诺的方法
与 XMLHttpRequest 等旧方法不同,Fetch API 使用承诺,因此您可以避免回调地狱并编写更易读的异步代码。灵活和可定制
Fetch API 支持所有常见的 HTTP 方法(GET、POST、PUT、DELETE),并允许您添加自定义标头、轻松处理 JSON 数据以及管理不同类型的请求和响应。轻量级解决方案
由于 Fetch API 内置于现代 JavaScript 环境中,因此您无需安装额外的库,从而减少项目的依赖性并提高效率。
在 Node.js 中设置 Fetch API
在 Node.js 中使用 Fetch API 之前,您需要正确设置环境。Fetch API 在 Node.js 17.5 及更高版本中原生可用,但在某些版本中仍处于实验阶段。让我们来看看设置过程。
步骤 1:检查你的 Node.js 版本
要使用 Fetch API 而不安装额外的库,您需要 Node.js 17.5 或更高版本。在终端中运行以下命令来检查您的 Node.js 版本:
1 | 节点-v |
如果你的版本低于 17.5,请从 官方网站.
第 2 步:启用实验性 Fetch API(可选)
如果你使用的是 17.5 或更高版本,但仍发现 Fetch API 是实验性的,则可能需要启用它。使用 --experimental-fetch
运行代码时:
1 | 节点--experimental-fetch your_code.js |
步骤3:创建Node.js项目
如果您从头开始,请创建一个新的 Node.js 项目。使用以下命令初始化您的项目并为您的代码创建一个文件:
1 | MKDIR fetch-api-演示 |
步骤 4:使用 Fetch API
现在,您可以直接在 app.js 文件中编写 Fetch API 代码。例如,基本的 GET 请求如下所示:
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
使用第三方库(可选)
如果您使用的是旧版本的 Node.js 或不想升级,您仍然可以通过安装 node-fetch 库来使用 Fetch API。使用以下命令安装:
1 | npm 安装 node-fetch |
然后,在您的代码中导入并使用它,如下所示:
1 | 常量 获取 = 要求(‘节点获取’); |
在 Node.js 中设置 Fetch API 很容易。完成后,您就可以开始发出 HTTP 请求了。在下一节中,我们将了解如何使用 Fetch API 进行 GET 请求。
使用 Fetch API 发出 GET 请求
GET 请求是用于从服务器获取数据的最常见 HTTP 请求类型。使用 Node.js 中的 Fetch API,发出 GET 请求很容易。让我们看看如何发出 GET 请求并处理响应。
基本 GET 请求示例
Fetch API 允许你使用 fetch()
函数,它将资源的 URL 作为其第一个参数。以下是发出基本 GET 请求的示例:
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
说明:
fetch()
向 URL 发送 HTTP GET 请求。response.json()
从响应中提取 JSON 数据。then()
处理响应数据。catch()
捕获任何错误。
使用 Async-Await 进行 GET 请求
Async-await 使代码更简洁。以下是使用 async-await 的相同 GET 请求:
1 | (异步 () => { |
使用 Async-Await 的主要优点:
- 通过避免嵌套,简化了承诺处理
.then()
调用。 - 它更易于阅读,特别是对于复杂的逻辑。
获取多个资源
您还可以一次获取多个资源。以下是示例:
1 | 取('https://jsonplaceholder.typicode.com/posts') |
此代码从 API 中检索帖子列表并将其记录到控制台。
添加查询参数
要在 GET 请求中包含查询参数,请将它们附加到 URL,如下所示:
1 | 常量 用户ID = 1; |
处理响应
Fetch API 可以灵活地处理不同的响应类型,例如纯文本、JSON 或二进制。以下是处理纯文本响应的方法:
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
GET 请求是任何 Web API 的基础。使用 Fetch API,您可以执行这些请求,同时保持代码整洁且易读。在下一节中,我们将介绍如何在 Fetch API 中处理响应标头。
在 Fetch API 中处理响应标头
响应标头提供有关 HTTP 响应的重要元数据,例如内容类型、服务器详细信息或缓存说明。借助 Fetch API,您可以轻松访问和使用这些标头。
访问响应标头
这款 Response
返回的对象 fetch()
函数有一个 headers 属性。此属性是 Headers
对象,它允许您读取和修改响应标头。以下是示例:
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
这里发生了什么:
- response.headers 是一个包含服务器返回的所有标头的对象。
- for...of 循环遍历每个标题并打印键值对。
常用标头
一些最常见的标头是:
- 内容类型:资源的媒体类型(例如
application/json
) - 缓存控制:指定缓存行为。
- 授权:包含身份验证凭据。
您可以使用以下方式访问特定标头 get()
方法:
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
CORS 和受限标头
在浏览器中使用 Fetch API 时,跨域资源共享 (CORS) 规则可能会限制可以访问哪些标头。默认情况下,仅公开以下标头:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
在 Node.js 中,这些都不适用,因此您可以完全访问所有标头。
实际用例:检查响应状态
您可以在处理正文之前使用标题来检查响应的状态。
1 | 取('https://jsonplaceholder.typicode.com/posts/1') |
这可确保您只处理有效的响应,从而使您的代码更加健壮。
通过理解和使用响应标头,您可以管理元数据、处理错误并优化 API 请求。在下一节中,我们将了解如何使用 Fetch API 发送 POST 请求。
使用 Fetch API 发送 POST 请求
Fetch API 可轻松向 API 发送 HTTP POST 请求。当您想要向服务器发送数据(例如,提交表单数据或在数据库中创建新记录)时,可使用 POST 请求。
发送基本 POST 请求
要发送 POST 请求,您需要包括 method
物业 fetch()
options 对象。此外,body 属性用于指定要发送的数据。以下是示例:
1 | 常量 网址= 'https://jsonplaceholder.typicode.com/posts'; |
这里发生了什么:
- 网址:POST 请求的端点。
- 付款方式:指定 HTTP 方法(
POST
). - 头:定义
Content-Type
告诉服务器数据是 JSON。 - Body:包含要发送的 JSON 编码数据。
为什么使用 JSON.stringify?
使用 Fetch API 发送数据时,它必须是字符串。这就是 JSON.stringify()
它将你的 JavaScript 对象转换成服务器可以理解的 JSON 字符串。
处理服务器响应
发送 POST 请求后,您通常会收到来自服务器的响应。响应可能包括请求的状态以及服务器上创建的任何新数据。
1 | 取(网址,{ |
真实用例
假设您正在构建一个用户注册表单。以下是使用 POST 请求发送表单数据的方法:
1 | 常量 用户 = { |
使用 Fetch API 进行 POST 请求可让您将数据发送到服务器。接下来,我们将介绍错误处理,以确保您的请求可靠。
Fetch API 中的错误处理
错误处理是使用 Fetch API 发出 HTTP 请求的重要组成部分。它可确保您的应用处理网络问题、无效响应或意外错误。
为什么错误处理很重要?
当你发出 HTTP 请求时,许多事情可能会出错:
- 服务器已关闭。
- URL 错误。
- 反应并不像我们所期望的那样。
- 网络将中断该请求。
如果不处理错误,您的应用程序将会失败或崩溃,并且用户将会度过糟糕的时光。
处理错误 then
和 catch
Fetch API 返回一个 Promise。您可以使用 .catch()
方法来处理请求期间的错误。
下面是一个例子:
1 | 取('https://invalid-url.example.com') |
关键点:
if (!response.ok)
检查 HTTP 响应状态是否在 200–299 范围内。如果不是,则抛出错误。.catch()
捕获网络错误和抛出的错误.then()
链。
将 Try-Catch 与 Async-Await 结合使用
为了更简洁的代码,你可以使用 async
和 await
用 try-catch
块来处理错误。
以下是同一个例子:
1 | (异步 () => { |
Try-Catch 的优点:
- 更易于阅读和理解,特别是对于复杂的逻辑。
- 将错误处理代码集中在一个地方。
处理超时
默认情况下,Fetch API 不支持请求超时。不过,您可以使用 Promise.race() 创建自定义超时。
实现方法如下:
1 | 常量 fetchWithTimeout =(url,选项,超时 = 5000)=> { |
这里发生了什么:
Promise.race()
运行两个承诺:一个用于获取请求,一个用于超时。- 如果获取请求所用的时间超过超时时间(此示例中为 3 秒),则超时承诺将拒绝该操作。
需要注意的常见错误情况
- 无效网址:确保您的 API 端点正确。2.**网络问题**:处理网络不可用的情况。
- 非 JSON 响应:如果服务器发送非 JSON 数据,则 response.json() 方法将抛出错误。
- CORS 问题:如果您在浏览器中运行,请确保服务器允许跨源请求。
记录调试错误
发生错误时,记录错误可以帮助调试:
1 | 取(‘https://example.com/api’) |
错误处理将使您的应用更加稳定可靠。在下一节中,我们将比较 Fetch 和 Axios,以帮助您决定使用哪一个。
Fetch API 与 Axios:主要区别
在 Node.js 或浏览器中处理 HTTP 请求时,Fetch API 和 Axios 是两个选项。两者都很棒但又有所不同。让我们根据关键点对它们进行比较,以帮助您做出选择。

你应该使用哪一个?
Fetch API 和 Axios 都有其用途,但这取决于您的项目:
- 使用 Fetch API 如果您想要一个本机的、没有外部依赖的解决方案,并且您的项目针对现代浏览器或 Node.js(具有实验性支持)。
- 使用 Axios 如果您需要更多功能,如拦截器、更简单的错误处理、内置超时或请求取消。Axios 也适用于旧版浏览器。
总结
在本博客中,我们介绍了如何使用 Fetch API 在 Node.js 中发出 HTTP 请求。我们研究了如何设置 Fetch、发出 GET 和 POST 请求、处理响应标头,并将 Fetch 与 Axios 进行了比较。
Fetch API 是一种在 Node.js 和浏览器中发出 HTTP 请求的简单而现代的方法。它很轻量,在大多数情况下都可以使用。但如果您需要拦截器或内置超时,那么 Axios 可能是更好的选择。
总而言之,Fetch API 适用于大多数情况,它是一种在 Node.js 中处理网络请求的简单而有效的方法。
常见问题
问:Fetch API 和 Axios 有什么区别?
Fetch API 和 Axios 都是使用 JavaScript 发出 HTTP 请求的方式,但它们之间存在关键区别。Fetch 是浏览器的原生功能,并附带 Node.js 实验性支持,而 Axios 是第三方库。Axios 简化了自动 JSON 解析和请求/响应拦截器等功能,而 Fetch 并不提供这些功能。另一方面,Fetch 更简单,不需要额外的依赖项。
问:如何使用 Node.js 中的 Fetch API 处理错误?
Fetch API 中的错误处理很简单。由于 Fetch 返回一个 Promise,因此您可以使用 .catch()
捕获错误或使用 try...catch
- async/await
. 例如,使用 async/await
,您可以按如下方式处理错误:
1 | 尝试 { |
这可确保正确处理诸如网络故障或无效 URL 之类的任何问题。
问:我可以在 Node.js 中使用 Fetch API 进行 POST 请求吗?
是的,Fetch API 非常适合发出 POST 请求。您只需指定 method
as POST
并包括一个 body
(通常是 JSON)。以下是示例:
1 | 常量 响应 = 等待 取(网址,{ |
这会将数据发送到服务器并将响应作为 JSON 处理。