在 Node.js 中发出 HTTP 请求的五种方法-51CTO.COM

原文来源：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(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 = `
<!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 月已被弃用，这使其成为一个不切实际的选择。

所有这些库主要做同样的事情——就像你喜欢哪个品牌的咖啡一样，最终你仍然在喝咖啡。根据您的用例明智地选择，并做出正确的权衡以获得最大利益。