在 Node.js 中发出 HTTP 请求的五种方法

2024年 3月 18日 61.6k 0

原文来源: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 = `
    
    
      
        
        
        Document
      
      
        
           Enter Name: 
            
          
          
        
      
    
    `;
    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 月已被弃用,这使其成为一个不切实际的选择。

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

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论