原文来源:https://blog.logrocket.com/5-ways-make-http-requests-node-js/
原文作者: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 和 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 和名称。
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 是一个非常流行的基于 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 是 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 类似,但有两个主要区别:
其他的与之前对 axios 的要求保持一致。您可以在此拉取请求中看到上面的示例。
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.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 的示例相比的一些差异:
除了内置的 HTTP/HTTPS 模块和内置的 fetch API 之外,所有其他四个 HTTP 客户端库都可以作为 npm 包提供。以下是根据 npm 趋势显示的过去六个月每周下载统计数据的快速概览:
从每月下载量来看,过去六个月中,node-fetch 最受欢迎,而 superagent 则最不受欢迎。为了更全面地了解它们的受欢迎程度,让我们检查其他指标,从 Got GitHub 存储库上提供的比较表中获取见解:
从上表来看,node-fetch 是下载次数最多的软件包,最大安装大小为 7.45MB。 Axios 拥有最多的 GitHub 星数,达到 10.3 万——比其他所有三个库的总和还多。
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.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 = `<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" cnotallow="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form actinotallow="/submit-form" enctype="application/x-www-form-urlencoded" method="POST"> <label> Enter Name: <input type="text" autocomplete="name" name="name" required /> </label> <input type="submit" /> </form> </body></html>`;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 月已被弃用,这使其成为一个不切实际的选择。
所有这些库主要做同样的事情——就像你喜欢哪个品牌的咖啡一样,最终你仍然在喝咖啡。根据您的用例明智地选择,并做出正确的权衡以获得最大利益。
本文链接://www.dmpip.com//www.dmpip.com/showinfo-26-76491-0.html在 Node.js 中发出 HTTP 请求的五种方法
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com
上一篇: JS问题:简单的Console.log不要再用了!试试这个
下一篇: 我应该使用按钮还是链接