如何使用Fetch API在Node.js中进行HTTP请求

你是一位程序员，但还不了解如何在Node.js中使用Fetch API进行HTTP请求？在本文中，您将学习到什么是Fetch API以及如何在Node.js中使用Fetch API设置HTTP请求。

随着技术的多样化增长，了解如何在Node.js中使用HTTP变得至关重要。HTTP是超文本传输协议的缩写。作为开发者程序员，你会同意我说，在网络上大部分通信都是通过HTTP请求进行的。因此，深入了解HTTP如何帮助接收和发送数据使得了解Node.js中的HTTP请求工作方式更加重要。

Node.js可以生成动态页面内容，并在服务器上创建、打开、读取、写入、删除甚至关闭文件。此外，它还可以收集、添加和修改数据库中的数据。Node.js消除了等待并继续处理下一个请求。因此，它为您作为开发者提供了构建强大而动态的响应式Web应用程序的机会。

Node.js运行异步编程，并且最重要的是它具有内置的HTTP模块——HTTP，允许数据传输。然而，Fetch API使得这种数据传输和接收更加灵活和简便。在本文中，您将学习如何使用fetch API在Node.js中进行HTTP请求。在那之前，请让我们先看一下Fetch API是什么。

什么是Fetch API

Fetch API 是一个 JavaScript 编程接口，允许运行异步 HTTP 请求，例如 GET、POST、PUT 或 DELETE。这是一种从 Web 服务器获取资源的更简单的方法。它是在现代浏览器中构建的，不需要使用任何额外的库。 Fetch API 于 2015 年推出，用于替代 XMLHttpRequest（基于回调的 API）。然而，将 Fetch API 置于 XMLHttpRequest 之上的独特之处在于 Fetch 有一个利用其 Promise 的标准。这进一步消除了回调地狱并产生更清晰的代码。

尽管 Fetch API 在所有主流浏览器中都可用，但在此之前，它在之前版本的 Node.js 中并未启用。要使用 fetch()，开发人员需要安装 npm（Node Package Manager）节点获取功能。此外，还需要像 Axios 和 Node-fetch 这样的第三方来帮助他们创建服务器端代码。直到 2022 年，Node.js 的更新版本（v 17.5）添加了实验性支持，无需额外的库即可使用 Fetch API。借助新版本，开发人员可以轻松编写代码并快速响应请求。

下面是基本 Fetch API 调用的简单示例

async function fetchExample() {

  const response = await fetch('https://api.example.com/data');

  const data = await response.json();

  console.log(data);

}

请记住，fetch 方法返回一个解析为响应的承诺。在此示例中，我们定义一个异步函数 fetchExample，它使用 fetch 方法向 URL https://api.example.com/data 发出 GET 请求。 wait 关键字用于等待响应返回后再继续执行。收到响应后，我们使用 JSON 方法解析 JSON 数据并将其记录到控制台。在 Response 对象上调用 JSON 方法来解析 JSON 数据。

Fetch API的优势

看看 Node.js 在 Fetch API 方面的进步，让我们深入探讨这一改进的一些有益属性。

Fetch API 实现速度更快：由于新版本 Node.js 的升级，其 Fetch API 实现构建在Undici。这恰好是一个 HTTP 客户端，但此 Undici 的主要特点是它的速度。因此，Node.js Fetch API 非常快速且稳定。
不需要额外的库：在 Fetch API 成为 Node.js 中的完整功能之前，以前的版本需要 Node Package Manager (NPM) 来启用 fetch。现在它有一个已配置的节点模块。因此，不需要 Node-Fetch 等第三方包或其他几个可以执行此功能的包。
Fetch API 启用更简单的代码：通过利用 Node.js 中内置的 fetch() 函数，以前使用过 Fetch API 的开发人员将会对这一进步感到更加满意。由于 Fetch API 是基于 Promise 的，因此可以使用更简单、更清晰的代码，同时仍然避免回调地狱。
处理错误或错误的更好方法：Fetch API 的构建是为了替换 XMLHttpRequest。因此，与 XMLHttpRequest 和之前使用的任何其他方法相比，它提供了更一致的错误处理方法。
Fetch API 具有灵活的语法：Fetch API 的语法比 XMLHttpRequest 等传统方法灵活得多。之所以如此，是因为它使用 Promise 来处理异步操作而不是回调。这进一步简化了其他开发人员解释代码的过程。

在 Node.js 中设置 Fetch API

Fetch API 有一个编程接口，用于使 HTTP 请求看起来类似于 XMLHttpRequest。但它们又不同，Fetch API 比 XML 更强大、更灵活。在本文的这一部分中，我们将向您展示如何在 Node.js 环境中设置 Fetch API。要开始在 Node.js 中使用 Fetch API，第一步是

第 1 步： 使用 npm 或 YARN 安装 Node-Fetch。简单写一下这段代码

npm install node-fetch

第2步：js文件需要node-fetch模块

const fetch = require('node-fetch');

第 3 步： 之后，使用 fetch() 函数发出 HTTP 请求。通过编写以下代码来发出 GET、POST、PUT 和 DELETE 请求：

fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

第 4 步：对于任何请求（POST、PUT、DELETE），您都可以将选项对象作为第二个参数传递给 fetch()。例如，让我们为带有 JSON 数据的 POST 请求编写代码

const postData = {

  key: 'value'

};

fetch('https://api.example.com/data', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify(postData)

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error('Error:', error));

在上面的代码中，fetch() 返回一个 Promise，该 Promise 解析为表示对请求的响应的 Response 对象。然后，您可以使用 .json() 解析 JSON 数据或其他更适合处理不同响应类型的方法。要处理错误，请使用 .catch() 以避免承诺拒绝。

这是在 Node.js 环境中使用 Fetch API 的方法。

使用 Fetch API 在 Node.js 中发出 HTTP 请求

使用 Node.js 中的 Fetch API 发出 HTTP 请求是一种从任何网站检索数据的简单且组织良好的方法。要发出此 HTTP 请求，您可以使用 node-fetch 包。该模块将允许您在 Node.js 中使用 fetch() 函数，其功能与本机 JavaScript 中的 window.fetch() 非常相似，但有一些差异。

让我们对 Google 主页执行 GET 请求：

const fetch = require('node-fetch');

fetch('https://google.com')

  .then(res => res.text())

  .then(text => console.log(text));

该函数返回一个 Response 对象，其中包含有用的函数和有关 HTTP 响应的信息，例如：

text()：以字符串形式返回响应正文。
json()：将响应体解析为JSON对象，如果无法解析则抛出错误。
status 和 statusText：包含有关 HTTP 状态代码的信息。
ok：如果状态为 200 状态代码（请求成功），则等于 true。
headers：包含响应标头的对象，可以使用 get() 函数访问特定标头

要执行 POST 请求，您需要将带有请求选项的对象作为第二个参数传递给 fetch() 函数。 options 对象应包含设置为“POST”的 method 属性、设置为包含请求标头的对象的 headers 属性以及设置为请求正文的 body 属性。时间

看一下如何向服务器发出 POST 请求：

fetch('https://example.com/api', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({

    name: 'Jason Mark',

    email: '[email protected]'

  })

})

  .then(res => res.json())

  .then(data => console.log(data));

执行 PUT 请求与发出 POST 请求类似。这是一个例子：

const response = await fetch("https://example.com/api/v1/users", {

  method: "PUT",

  credentials: "include",

  headers: {

    "Content-Type": "application/json",

  },

  body: JSON.stringify({

    username: "jones-zoey",

    email: "[email protected]"

    role: "regular-user",

    age: 25,

    birthplace: "New York",

  }),

})

要发出 DELETE 请求，您需要将带有请求选项的对象作为第二个参数传递给 fetch() 函数。选项对象应包含设置为“DELETE”的方法属性。

以下是如何向服务器发出 DELETE 请求的示例：

fetch('https://example.com/api/31', {

  method: 'DELETE'

})

  .then(res => res.json())

  .then(data => console.log(data));

处理来自 HTTP 请求的错误响应

错误是任何代码中的常见因素，因此调试是解决错误的完美解决方案。使用 Fetch API 发出 HTTP 请求时，可能出现的错误是 HTTP 状态代码，例如错误 404 Not Found 或 500 Internal Server Error。然而，调试这些错误需要响应。

这是使用 HttpURLConnection 的示例：

try {

    // Make your HTTP request

    int responseCode = connection.getResponseCode();

    if (responseCode == HttpURLConnection.HTTP_OK) {

        // Handle successful response

    } else {

        // Handle error response

        // You can get more details from the error stream

        InputStream errorStream = connection.getErrorStream();

        // Read the error stream and handle it accordingly

    }

} catch (IOException e) {

    // Handle general IO exceptions

    e.printStackTrace();

}

如果您使用的是像 Retrofit 这样的库，错误处理是通过回调或定义错误模型来完成的。请注意，代码可以根据您的具体用例和您正在使用的 HTTP 库进行调整。

这是使用 Retrofit 的示例：

Call<MyResponseModel> call = apiService.makeRequest();

call.enqueue(new Callback<MyResponseModel>() {

    @Override

    public void onResponse(Call<MyResponseModel> call, Response<MyResponseModel> response) {

        if (response.isSuccessful()) {

            // Handle successful response

        } else {

            // Handle error response

            // You can get more details from response.errorBody()

            try {

                String errorBody = response.errorBody().string();

                // Parse and handle the error body accordingly

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

    @Override

    public void onFailure(Call<MyResponseModel> call, Throwable t) {

        // Handle network failures or exceptions

        t.printStackTrace();

    }

});

常见问题解答

1. 为什么 HTTP 请求很重要？

HTTP请求之所以至关重要，是因为它在任何网络通信中都非常重要。这是一种交互方式，网络无法绕过它而得到正确的响应。HTTP请求很重要，因为它使得从不同的网络源发送和接收数据成为可能。作为开发者，进行HTTP请求是访问多个网站、解析并保存数据到数据库的生命线。没有这个HTTP请求，这些都无法实现。每一步带来的好处就是帮助开发者在构建响应式的Web应用程序和环境时保持灵活性。

2. AXIOS 和 Fetch API 之间有什么区别？

AXIOS和Fetch API之间的区别是一个经常出现的问题。这两个Node包背后隐藏着一个事实，它们都非常受欢迎。它们用于轻松地进行GET和POST HTTP请求，并且有趣的是，它们都产生相同的输出结果。由于Fetch API的现代化，差异可能会更加明显，因此回答你的问题，Fetch API和AXIOS之间核心区别在于：Fetch API使用请求中的body属性，而AXIOS使用data属性。Fetch API不允许其他库使用，而AXIOS则支持第三方包。

AXIOS直接使用并发送JSON数据，而Fetch API必须先将其转换为字符串才能发送，并且在初始化JSON格式之前还需要调用response.json()函数。此外，由于AXIOS主要处理数据，在数据中变量名必须存在；而Fetch API没有这样的限制，变量名可以随意命名。还有其他差异, 但以上是最明显、核心性质上不同之处.

3. 如何使用 Fetch API 发送 POST 请求？

发送POST请求非常简单。要进行POST请求，首先需要将配置对象添加到fetch()函数中。然后，该对象应包括要发送的数据的HTTP POST方法。所有这些都将在请求的正文中。之后，从HTML中提取数据以生成代码，然后通过POST请求提交。在进行HTTP请求时，POST和GET请求非常常见，因此学习如何发送这两种请求对于具有广泛知识背景的开发人员来说并不困难。

结论

Fetch API是XMLHttpRequest的现代化改进。在此之前，在Node.js中使用它并没有自己独立的功能，并且总是需要调用第三方软件包才能使用它。然而，在撰写本文时，Fetch API已作为实验性功能出现在Node.js中，并成为了Node.js新版本17.5或一些人简称为Node.js 18版本所附带的新增功能。

了解HTTP请求通信对于任何Web应用程序都非常重要，在本文中我们介绍了Fetch API是什么、其优势、在Node.js中设置Fetch API的基本方法以及如何使用Fetch API进行不同类型的HTTP请求等内容。请花时间仔细阅读本文，并不要错过其中所包含的内容。