原文作者：Geshan Manandhar
译者：一川
在 Node.js 中发出 HTTP 请求的方法有多种。可以通过使用 Node.js 提供的标准内置 HTTP/HTTPS 模块、利用 Node 环境中包含的 Fetch API 或选择第三方 npm 包来简化流程来实现此目的。
在本文中，将探索本机 HTTPS 模块和 Fetch API，并研究流行的 npm 包，例如 Axios、Got、superagent 和 node-fetch，以促进高效地发出 HTTP 请求。
将使用每个 HTTP 客户端向 JSONPlaceholder API 发出 GET 请求。它将向我们发送 10 个用户的数据。将在控制台上记录每个用户名和 ID。
Let’s get started!
标准 Node.js HTTP(S) 模块
Node.js 带有内置的 HTTP 和 HTTPS 模块。在下面的示例中，使用 HTTPS 模块对占位符 API 执行 GET 请求：
const https = require('https');
https.get('https://jsonplaceholder.typicode.com/users', res => {
let data = [];
const headerDate = res.headers && res.headers.date ? res.headers.date : 'no response date';
console.log('Status Code:', res.statusCode);
console.log('Date in Response header:', headerDate);
res.on('data', chunk => {
data.push(chunk);
});
res.on('end', () => {
console.log('Response ended: ');
const users = JSON.parse(Buffer.concat(data).toString());
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
});
}).on('error', err => {
console.log('Error: ', err.message);
});让我们看一下代码，需要使用nodejs内置的 https 模块，该模块在任何标准 Node.js 安装中都可用。无需 package.json 文件或 npm install 即可开始使用它。
接下来，将 data 初始化为空数组，并记录响应标头中的状态代码和日期。每当获得一块数据时，就把它推入 data 数组中。收到所有响应后，连接数据数组，将其转换为字符串，并解析 JSON 以获取用户列表。循环访问用户并将用户 ID 和名称记录到控制台。
这里需要注意一件事：如果请求出现错误，错误消息将记录在控制台上。上述代码可作为拉取请求使用。
您可以使用 node native-https.js 命令执行上面的代码，前提是您将文件命名为 native-https.js 。它应该显示如下输出：
图片
可以使用相同的方法来运行本文中的所有其他示例；他们将显示类似的输出。打印状态代码、响应标头中的日期以及响应正文中的用户 ID 和名称。
内置Fetch API
Node.js 在 v16.15.0 中提供了 Fetch API 的浏览器兼容实现的实验版本，并在 Node v21 中变得稳定。
Fetch 在环境中本身可用，无需导入或单独需要。这个内置 API 具有多种优势：无需持续维护，最大限度地减少安全问题，并且不会影响捆绑包大小或通常与第三方软件包相关的许可问题。
您可以将 Fetch API 与 async/await 或 Promise 链结合使用：
(async () => {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const headerDate = res.headers && res.headers.get('date') ? res.headers.get('date') : 'no response date';
console.log('Status Code:', res.status);
console.log('Date in Response header:', headerDate);
const users = await res.json();
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
} catch (err) {
console.log(err.message); //can be console.error
}
})();由于 Fetch API 与浏览器兼容，因此您为使用 Fetch API 在浏览器中获取数据而编写的代码也可以在 Node.js 中使用而无需修改，反之亦然。
Axios
Axios 是一个非常流行的基于 Promise 的请求库。它是一个适用于浏览器和 Node.js 的 HTTP 客户端。它还包括一些方便的功能，例如拦截请求和响应数据，以及自动将请求和响应数据转换为 JSON。
const axios = require('axios');
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
const headerDate = res.headers && res.headers.date ? res.headers.date : 'no response date';
console.log('Status Code:', res.status);
console.log('Date in Response header:', headerDate);
const users = res.data;
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
})
.catch(err => {
console.log('Error: ', err.message);
});上面的示例中的代码比前一个示例中的代码少，因为它使用了 Promise 链。但是，您可以将其变成 async/await。
解释一下上面的例子做了什么。需要使用 axios 库，然后使用 axios.get 方法向 JSONPlaceholder API 发出 GET 请求。使用承诺链来处理响应。在 then 方法回调中，将状态代码和日期记录到控制台。
Axios 将响应数据转换为开箱即用的 JSON。上例中的响应数据是用户数组。循环遍历它并将用户 ID 和名称记录到控制台。
Got
Got 是 Node.js 的另一个流行的 HTTP 请求库。 Got 具有基于承诺的 API，其 HTTP/2 支持和分页 API 是其独特的特点。
const got = require('got');
got.get('https://jsonplaceholder.typicode.com/users', {responseType: 'json'})
.then(res => {
const headerDate = res.headers && res.headers.date ? res.headers.date : 'no response date';
console.log('Status Code:', res.statusCode);
console.log('Date in Response header:', headerDate);
const users = res.body;
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
})
.catch(err => {
console.log('Error: ', err.message);
});上面的代码示例与 Axios 类似，但有两个主要区别：
- 我们需要将 {responseType: 'json'} 作为第二个参数传递给 get 方法，以指示响应为 JSON 格式
- 状态代码标头称为 statusCode ，而不是 status
其他的与之前对 axios 的要求保持一致。您可以在此拉取请求中看到上面的示例。
superagent
superagent 于 2011 年 4 月由 VisionMedia 首次发布，是最古老的 Node.js 请求包之一。 superagent 将自己定位为“小型、渐进式客户端 HTTP 请求库和 Node.js 模块，具有相同的 API，支持许多高级 HTTP 客户端功能。”它提供基于回调和基于承诺的 API。 superagent 有几个插件，您可以使用它来扩展其功能。
const superagent = require('superagent');
(async () => {
try {
const res = await superagent.get('https://jsonplaceholder.typicode.com/users');
const headerDate = res.headers && res.headers.date ? res.headers.date : 'no response date';
console.log('Status Code:', res.statusCode);
console.log('Date in Response header:', headerDate);
const users = res.body;
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
} catch (err) {
console.log(err.message); //can be console.error
}
})();Superagent 已经成熟且经过实战考验，因此非常可靠。我们还可以使用 SuperTest 库测试超级代理调用。与前面的示例一样，上面的超级代理示例可作为拉取请求使用。
node-fetch
node-fetch 是 Node.js 的另一个非常流行的 HTTP 请求库 - 根据 npm 趋势，在 2024 年 2 月的第一周，它的下载量超过 5000 万次。
用他们自己的话来说，“node-fetch 是一个轻量级模块，它将 Fetch API ( window.fetch ) 引入 Node.js。”其功能包括与基于浏览器的 window.fetch 以及本机 Promise 和异步函数的一致性。
const fetch = require('node-fetch');
(async () => {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const headerDate = res.headers && res.headers.get('date') ? res.headers.get('date') : 'no response date';
console.log('Status Code:', res.status);
console.log('Date in Response header:', headerDate);
const users = await res.json();
for(user of users) {
console.log(`Got user with id: ${user.id}, name: ${user.name}`);
}
} catch (err) {
console.log(err.message); //can be console.error
}
})();让我们回顾一下与使用 superagent 和 async/await 的示例相比的一些差异：
- node-fetch 不需要显式的 GET 方法； HTTP 动词可以作为第二个参数中的 method 键发送，该参数是一个对象。例如： {method: 'GET'}
- 另一个区别是标头是一个对象，具有 get 方法来获取标头值。我们调用 res.headers.get('date') 来获取日期响应头的值
Node HTTP请求方式对比
除了内置的 HTTP/HTTPS 模块和内置的 fetch API 之外，所有其他四个 HTTP 客户端库都可以作为 npm 包提供。以下是根据 npm 趋势显示的过去六个月每周下载统计数据的快速概览：
从每月下载量来看，过去六个月中，node-fetch 最受欢迎，而 superagent 则最不受欢迎。为了更全面地了解它们的受欢迎程度，让我们检查其他指标，从 Got GitHub 存储库上提供的比较表中获取见解：
从上表来看，node-fetch 是下载次数最多的软件包，最大安装大小为 7.45MB。 Axios 拥有最多的 GitHub 星数，达到 10.3 万——比其他所有三个库的总和还多。
使用 Express.js 实现 HTTP 服务
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
app.get("/", (req, res) => {
res.send("Hello world!");
});
app.listen(PORT, () => {
console.log(`Your app is listening on port ${PORT}`);
});这就是使用 Express.js 实现基本 HTTP 服务的方式。
处理Node HTTPS POST 请求
在本节中，我们将探讨如何在 Node.js 服务器中处理 POST 请求。当用户提交 HTML 表单或发出 AJAX POST 请求时，会发生典型的 POST 请求。
当 POST 请求到达其预期端点时，您将访问 POST 数据，在回调函数中解析它，验证和清理数据，并可能发回响应。但是，您应该意识到，在使用普通 Node.js 服务器时，解析 HTTP 请求正文可能会很乏味。
下面的代码是普通 Node.js HTTP 服务器的基本实现。它有一个基本的 HTML 表单，您可以使用它来发出 POST 请求。请求正文的结构取决于编码类型。这些编码类型包括 application/x-www-form-urlencoded 、 multipart/form-data 和 text/plain ：
const http = require("http");
const html = `
Document
`;
const server = http.createServer((req, res) => {
switch (req.method) {
case "GET":
if (req.url === "/") {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(html);
} else {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Page not found");
}
break;
case "POST":
if (req.url === "/submit-form") {
let body = "";
req.on("data", (data) => {
body += data;
});
req.on("end", () => {
console.log("Request body: " + body);
// Parse, validate, and sanitize
res.writeHead(200, { "Content-Type": "application/json" });
res.end(JSON.stringify({ body }));
});
} else {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Page not found");
}
break;
default:
res.writeHead(405, { "Content-Type": "text/plain" });
res.end("Method not supported");
}
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Your app is listening on PORT ${PORT}`);
});解析 POST 请求正文后，您需要验证和清理数据。然后，您可以将数据保存在数据库中、对用户进行身份验证或重定向到适当的页面。
大多数后端框架都具有用于解析 HTTP 请求正文的内置功能。使用 Express.js，当请求正文具有 application/x-www-form-urlencoded 编码时，您可以使用内置的 express.urlencoded() 中间件。中间件将使用请求数据的键值对填充 req.body ：
const express = require("express");
const path = require("path");
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static("public"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.post("/submit-form", (req, res) => {
console.log(req.body);
res.json(req.body);
});
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});
app.listen(PORT, () => {
console.log(`Your app is listening on port ${PORT}`);
});对于 multipart/form-data 编码，需要使用第三方包，例如busboy、Multer或formidable。
下面的代码说明了如何使用 Multer。由于它不是内置中间件，因此请务必首先从 npm 包注册表安装它：
const express = require("express");
const path = require("path");
const multer = require("multer");
const app = express();
const upload = multer();
const PORT = process.env.PORT || 3000;
app.use(express.static("public"));
app.post("/submit-form", upload.none(), (req, res) => {
console.log("req.body: ", req.body);
console.log("Content-Type: ", req.get("Content-Type"));
res.json(req.body);
});
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});
app.listen(PORT, () => {
console.log(`Your app is listening on port ${PORT}`);
});最后，Express还有一个内置的中间件，用于解析具有 text/plain 编码的请求体。它的用法与我们之前看过的中间件类似。你可以像这样安装它：
app.use(express.text());总结
axios比superagent的功能列表很长，尽管 node-fetch 看起来很有前途并且安装大小很小，但我不确定该 API 是否足够用户友好——至少对我来说是这样。
您可能会注意到我的讨论中省略了 Request npm 包。尽管 Request 持续受欢迎，每周下载量达到 1142 万次，但截至 2024 年 2 月已被弃用，这使其成为一个不切实际的选择。
所有这些库主要做同样的事情——就像你喜欢哪个品牌的咖啡一样，最终你仍然在喝咖啡。根据您的用例明智地选择，并做出正确的权衡以获得最大利益。
