Node.js GET/POST requests

En muchos escenarios, nuestro servidor necesita interactuar con el navegador del usuario, como el envío de formularios.

El envío de formularios al servidor generalmente utiliza solicitudes GET/POST.

En este capítulo presentaremos las solicitudes GET/POST de Node.js.

Obtener el contenido de una solicitud GET

Debido a que la solicitud GET está directamente incrustada en la ruta, la URL es la ruta de solicitud completa, incluyendo?la parte posterior, por lo que puede analizar manualmente el contenido posterior como parámetros de la solicitud GET.

En Node.js, puede utilizar el constructor URL para analizar la URL de la solicitud.

El objeto URL es una herramienta estándar en Node.js para analizar y manipular URL. Proporciona una interfaz conveniente para acceder y modificar los distintos componentes de una URL, como protocolo, nombre de host, ruta, parámetros de consulta, etc.

Ejemplo

const http = require('http'); const util = require('util'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }); //Usar el constructor URL para analizar la URL de la solicitud const myUrl = new URL(req.url, `http://${req.headers.host}`); //Mostrar las distintas partes de la URL res.end(util.inspect({ href: myUrl.href, origin: myUrl.origin, protocol: myUrl.protocol, host: myUrl.host, hostname: myUrl.hostname, port: myUrl.port, pathname: myUrl.pathname, search: myUrl.search, searchParams: Object.fromEntries(myUrl.searchParams) //Convertir searchParams a un objeto plano })); }).listen(3000); console.log("Server is running at http://localhost:3000");

Acceda en el navegadorhttp://localhost:3000/user?name=Ejemplo&url=www.example.comLuego vea el resultado devuelto:

Obtener los parámetros de la URL

Podemos usar el método url.parse para analizar los parámetros de la URL, el código es el siguiente:

Ejemplo

const http = require('http'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }); //Usar el constructor URL para analizar la URL de la solicitud const myUrl = new URL(req.url, `http://${req.headers.host}`); //Obtener los parámetros de consulta const name = myUrl.searchParams.get("name"); const siteUrl = myUrl.searchParams.get("url"); res.write("Nombre del sitio web:" + (name || "No proporcionado")); res.write("\n"); res.write("URL del sitio web:" + (siteUrl || "No proporcionado")); res.end(); }).listen(3000); console.log("Server is running at http://localhost:3000");

Acceda en el navegadorhttp://localhost:3000/user?name=Ejemplo&url=www.example.comLuego vea el resultado devuelto:

Objeto URL

A continuación se presentan las propiedades y métodos del objeto URL:

Propiedad/MétodoDescripciónSalida de ejemplo
hrefCadena URL completa"http://example.com:8080/path?foo=bar#section"
originEl origen de la URL, incluyendo protocolo, nombre de host y puerto (si existe)"http://example.com:8080"
protocolLa parte del protocolo de la URL, seguida de:"http:"
hostNombre de host y número de puerto"example.com:8080"
hostnameNombre de host, sin incluir el número de puerto"example.com"
portNúmero de puerto (si se especifica)"8080"
pathnameParte del nombre de ruta"/path"
searchParte de la cadena de consulta, incluyendo el?"?foo=bar&hello=world"
searchParamsURLSearchParamsObjeto, utilizado para manipular los parámetros de consulta{ foo: 'bar', hello: 'world' }
hashParte del ancla, incluyendo#"#section"
MétodoDescripciónCódigo de ejemploSalida de ejemplo
get(name)Obtener el valor del parámetro de consulta del nombre especificadomyUrl.searchParams.get("foo")"bar"
append(name, value)Agregar nuevos parámetros a la cadena de consultamyUrl.searchParams.append("newKey", "newValue")?foo=bar&newKey=newValue
set(name, value)Establecer el parámetro del nombre especificado en la cadena de consulta (actualizar si ya existe)myUrl.searchParams.set("foo", "newBar")?foo=newBar
delete(name)Eliminar el parámetro de consulta del nombre especificadomyUrl.searchParams.delete("foo")?hello=world
has(name)Determinar si la cadena de consulta contiene un parámetro con el nombre especificadomyUrl.searchParams.has("foo")trueofalse
forEach(callback)Iterar sobre los pares clave-valor de los parámetros de consulta y ejecutar la función de retornomyUrl.searchParams.forEach((v, k) => console.log(k, v))Salida de pares clave-valor
toString()Convertir los parámetros de consulta a forma de cadena, adecuado para reconstruir la URLmyUrl.searchParams.toString()"foo=bar&hello=world"

Ejemplo

const myUrl = new URL("http://example.com/path?foo=bar&hello=world");

console.log(myUrl.pathname);            // Output: /path
console.log(myUrl.searchParams.get("foo")); // Output: bar

myUrl.searchParams.append("newKey", "newValue");
console.log(myUrl.href);               // Output: http://example.com/path?foo=bar&hello=world&newKey=newValue

Obtener el contenido de una solicitud POST

En Node.js, el manejo de las solicitudes POST suele requerir recibir los datos del cuerpo de la solicitud a través del módulo http. A diferencia de las solicitudes GET, los datos de una solicitud POST no se incluyen en la URL, sino que se envían como cuerpo de la solicitud. Por lo tanto, al recibir datos POST en Node.js, es necesario escuchar y manejarrequestdel objetodatayendeventos.

  • Escuchardatael evento: cuando un bloque de datos llega al servidor,datael evento se dispara y el bloque de datos se pasa como parámetro del callback.
  • Escucharendel evento: cuando todo el cuerpo de la solicitud ha sido recibido,endel evento se dispara y entonces se pueden procesar los datos completos de la solicitud POST.
El siguiente código muestra cómo usar el módulo http en Node.js para manejar solicitudes POST:

Ejemplo

const http = require('http');

// Crear un servidor HTTP
http.createServer((req, res) => {
    // Comprobar si el método de solicitud es POST
    if (req.method === 'POST') {
        let body = '';

        // Escuchar el evento data, recibir los datos por bloques
        req.on('data', (chunk) => {
            body += chunk; // Acumular los bloques de datos recibidos
        });

        // Escuchar el evento end, la recepción de datos ha terminado
        req.on('end', () => {
            // Mostrar los datos POST recibidos
            console.log('Received POST data:', body);

            // Establecer el encabezado y el contenido de la respuesta
            res.writeHead(200, { 'Content-Type': 'text/plain' });
            res.end('POST data received successfully!');
        });

    } else {
        // Manejo de solicitudes que no son POST
        res.writeHead(405, { 'Content-Type': 'text/plain' });
        res.end('Only POST requests are supported.');
    }

}).listen(3000, () => {
    console.log('Server is running at http://localhost:3000');
});

Explicación del código:

  1. Detectar el método de solicitud: mediantereq.method === 'POST'se determina si el tipo de solicitud es POST.
  2. Recibir datos: enreq.on('data')se acumulan los bloques de datos en el evento, formando el cuerpo de datos completo.
  3. Completar la recepción: enreq.on('end')se procesan los datos POST completos en el evento.
  4. Responder al cliente: después de completar la recepción y el procesamiento de datos, se envía una respuesta al cliente.

Puede usar el comando curl para probar la solicitud POST:

curl -X POST -d "name=example&age=25" http://localhost:3000

Manejo de datos JSON

Si la solicitud POST envía datos JSON, se puedereq.on('end')en él, analizar los datos recibidos como un objeto:

req.on('end', () => {
    const parsedData = JSON.parse(body); // 将 JSON 字符串解析为对象
    console.log('Received JSON data:', parsedData);
    res.end('JSON data received successfully!');
});

módulo querystring

El módulo querystring se utiliza para manejar los datos de las cadenas de consulta de URL y de las solicitudes POST.

Para los datos de solicitudes POST codificados como application/x-www-form-urlencoded, el módulo querystring puede ayudar a analizar el cuerpo de la solicitud y convertirlo en un objeto de JavaScript, lo que facilita el acceso y la manipulación.

Supongamos que el formato de los datos de la solicitud POST enviada por el cliente esapplication/x-www-form-urlencoded(por ejemplo, envío de formularios), los datos son similares aname=example&age=25. Después de recibir los datos, se puede usar elquerystring.parsemétodo para analizar los datos y convertirlos en un objeto.

Explicación de la estructura de sintaxis básica

var http = require('http'); var querystring = require('querystring'); var util = require('util'); http.createServer(function(req, res){ //Se define una variable `post` para almacenar temporalmente la información del cuerpo de la solicitud. var post = ''; //A través de la función de escucha del evento `data` de `req`, cada vez que se reciben datos del cuerpo de la solicitud, se acumulan en la variable `post`. req.on('data', function(chunk){ post += chunk; }); //Después de que se activa el evento `end`, se utiliza `querystring.parse` para analizar `post` como el formato real de la solicitud POST y luego se devuelve al cliente. req.on('end', function(){ post = querystring.parse(post); res.end(util.inspect(post)); }); }).listen(3000);

El siguiente ejemplo envía un formulario mediante POST y muestra los datos:

Ejemplo

var http = require('http'); var querystring = require('querystring'); var postHTML = '<html><head><meta charset="utf-8"><title>Ejemplo Node.js Ejemplo</title></head>' + '<body>' + '<form method="post">' + 'Nombre del sitio web: <input name="name"><br>' + 'URL del sitio web: <input name="url"><br>' + '<input type="submit">' + '</form>' + '</body></html>'; http.createServer(function (req, res) { var body = ""; req.on('data', function (chunk) { body += chunk; }); req.on('end', function () { //Analizar parámetros body = querystring.parse(body); //Establecer la información del encabezado de respuesta y la codificación res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); if(body.name && body.url) { //Mostrar los datos enviados res.write("Nombre del sitio web:" + body.name); res.write("<br>"); res.write("URL del sitio web:" + body.url); } else { //Mostrar formulario res.write(postHTML); } res.end(); }); }).listen(3000);

Demostración en GIF del resultado de ejecución:

Otras extensiones