La interacción entre el frontend y el backend de los sitios web es posible a través de las peticiones HTTP. Funcionalidades como la actualización de un usuario nuevo/antiguo en una base de datos, la publicación de una entrada en el blog desde el panel de control de WordPress, la eliminación de una foto de tu perfil y la actualización de tu biografía requieren una interacción entre un servidor y un cliente para modificar los datos.

Cuando construimos aplicaciones web — tanto frontend como full stack web apps — a menudo interactuamos con datos almacenados en diferentes bases de datos y servidores. Estos servidores pueden pertenecer a terceros o ser creados por los desarrolladores de un proyecto.

Para interactuar con estos servidores, podemos hacer uso de diferentes métodos HTTP para solicitar datos. Podemos crear, leer, actualizar y eliminar (o CRUD) datos en los servidores utilizando verbos HTTP específicos como POST, GET, PUT/PATCH y DELETE.

En este tutorial, aprenderás las distintas formas en las que puedes hacer peticiones HTTP a servidores remotos y realizar operaciones CRUD en JavaScript.

Cada sección presentará un nuevo método para enviar peticiones HTTP. Empezaremos por los métodos incorporados, como la API fetch y el objeto XMLHttpRequest, antes de ver algunas bibliotecas de peticiones HTTP de código abierto, como Axios y SuperAgent.

¡Empecemos!

¿Qué Es Una Petición HTTP en JavaScript?

Las peticiones HTTP en JavaScript son un conjunto de métodos predefinidos que se utilizan para interactuar con los datos almacenados en los servidores.

Cada solicitud enviada a un servidor incluye un punto final y el tipo de solicitud que se envía. Puedes ver un punto final como una pasarela entre dos programasː el cliente y el servidor.

El cliente es el programa que envía una solicitud, mientras que el servidor es el que recibe la solicitud. El servidor devuelve una respuesta en función de la validez de la solicitud. Si la solicitud tiene éxito, el servidor devuelve los datos en formato XML o JSON (JSON en la mayoría de los casos), y si la solicitud falla, el servidor devuelve un mensaje de error.

Las respuestas que devuelve el servidor suelen estar asociadas a códigos de estado. Estos códigos nos ayudan a entender lo que el servidor intenta decir cuando recibe una petición. Aquí tienes algunos de ellos y su significado:

  • 100-199 denota una respuesta informativa.
  • 200-299 denota una solicitud exitosa.
  • 300-399 denota una redirección.
  • 400-499 indica un error del cliente.
  • 500-599 denota un error del servidor.

Hablaremos más sobre algunos de ellos en las secciones siguientes.

En la siguiente sección, verás las diferentes formas en que puedes hacer peticiones HTTP en JavaScript.

Cómo Hacer Una Petición HTTP en JavaScript

Esta sección estará dividida en sub-secciones, cada una de las cuales te enseñará diferentes métodos que puedes utilizar para hacer peticiones HTTP en JavaScript.

Cada método tratado tendrá un ejemplo que mostrará cómo enviar peticiones POST, GET, PUT/PATCH y DELETE a los servidores.

El marcador de posición JSON servirá como servidor remoto/punto final donde se enviarán todas nuestras peticiones.

¡Vamos a sumergirnos!

1. Cómo hacer una petición HTTP en JavaScript utilizando XMLHttpRequest (AJAX)

XMLHttpRequest es un objeto incorporado en JavaScript que se utiliza para interactuar con los servidores y cargar contenido en las páginas web sin recargar el navegador.

En esta sección, verás cómo enviar solicitudes POST, GET, PUT/PATCH y DELETE utilizando XMLHttpRequest.

AJAX se utiliza para realizar peticiones HTTP asíncronas. Esto significa simplemente que mientras la respuesta de una petición está pendiente, otras partes de tu código JavaScript pueden seguir ejecutándose sin esperar a que la petición se complete primero.

También puedes introducir modificaciones en una sección concreta de tu página web sin obligar al visitante a recargar toda la página utilizando AJAX.

AJAX, por defecto, funciona con el objeto XMLHttpRequest, por lo que los ejemplos de esta sección pueden considerarse como peticiones AJAX.

Cómo enviar una solicitud GET en JavaScript utilizando XMLHttpRequest

Utilizas la petición GET cuando quieres recuperar datos de un servidor. Para enviar una solicitud GET con éxito utilizando XMLHttpRequest en JavaScript, debes asegurarte de que lo siguiente se hace correctamente:

  1. Crea un nuevo objeto XMLHttpRequest.
  2. Abre una conexión especificando el tipo de petición y el punto final (la URL del servidor).
  3. Envía la petición.
  4. Espera la respuesta del servidor.

Ahora que hemos visto algunos de los pasos para enviar una solicitud POST utilizando XMLHttpRequest, veamos un ejemplo de códigoː

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Desglosaremos el código anterior para ayudarte a entender lo que ocurre aquí.

Lo primero que hicimos fue crear un nuevo objeto XMLHttpRequest y almacenarlo en una variable llamada xhr. Esto es:

const xhr = new XMLHttpRequest();

A continuación, especificamos el tipo de petición (GET) y el punto final al que se enviará la petición (en este caso,»https://jsonplaceholder.typicode.com/users«)ː

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

Para enviar la petición al servidor, utilizamos el método send().

Cuando el servidor devuelve los datos, puedes especificar el formato en el que se devuelven los datos.

En la mayoría de los casos, se utiliza JSON. Así que nos aseguramos de que nuestros datos se devuelvan en JSON añadiendo esto:

xhr.responseType = "json";

En este punto, hemos enviado con éxito una petición GET. Lo siguiente es escuchar lo que dice el servidor utilizando un escuchador de eventos:

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

En el código anterior, utilizamos el escuchador de eventos onload. Utilizando una sentencia if, comprobamos el estado de la respuesta del servidor.

Si el estado del cliente es 4 (DONE) y si el código de estado es 200 (successful), los datos se registrarán en la consola. En caso contrario, aparecerá un mensaje de error mostrando el estado de error.

Si has seguido hasta este punto sin ningún error, deberías tener una matriz de objetos en tu consolaː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Estos son los datos recuperados del servidor.

Cómo enviar una petición POST en JavaScript utilizando XMLHttpRequest

Con la petición POST, puedes enviar nueva información (datos) al servidor/base de datos como un objeto. El objeto puede ser información sobre un nuevo usuario, una nueva entrada en la lista de tareas, o cualquier otra cosa que necesites registrar.

El ejemplo de código que verás en esta sección es similar al de la sección anterior. La principal diferencia es que las peticiones POST requieren cierta información que suele almacenarse en un objeto antes de ser enviada al servidor.

Aquí tienes un ejemplo:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 201) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

En el código anterior, la información que se enviará al servidor se almacena en una variable llamada body. Contiene tres propiedadesː title, body, y userId.

Ten en cuenta que la variable body que contiene el objeto debe ser convertida en un objeto JSON antes de ser enviada al servidor. La conversión se realiza mediante el método JSON.stringify().

Para asegurarte de que el objeto JSON se envía al servidor, se pasa como parámetro al método send():

xhr.send(body);

Cómo enviar una solicitud PATCH en JavaScript utilizando XMLHttpRequest

La petición PATCH se utiliza para actualizar las propiedades especificadas de un objeto. Esto es diferente del método PUT, que actualiza la totalidad de un objeto.

Aquí tienes un ejemplo de solicitud PATCH utilizando XMLHttpRequest en JavaScript:

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
  body: "My PATCH request",
});
xhr.onload = () => {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

El código anterior, si tiene éxito, registrará la parte del objeto que se ha actualizado y enviado al servidor.

Cómo enviar una solicitud DELETE en JavaScript utilizando XMLHttpRequest

Como su nombre indica, el método DELETE se utiliza para eliminar datos de un servidor. Esto es igual para cualquier método HTTP de JavaScript.

En la mayoría de los casos, tendrás que especificar el ID de los datos que quieres eliminar. El ID suele ser un parámetro en el punto final/URL.

Veamos un ejemplo de solicitud DELETEː

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send();

El código anterior eliminará un objeto con una entrada con el ID 3 especificado en el endpoint («https://jsonplaceholder.typicode.com/posts/3«).

2. Cómo hacer una petición HTTP en JavaScript con jQuery

jQuery simplifica el proceso de obtención de datos de los servidores haciendo la sintaxis más corta y sencilla.

En esta sección, verás cómo hacer peticiones HTTP utilizando diferentes métodos de jQuery.

Cómo enviar una petición GET en JavaScript utilizando jQuery

jQuery nos proporciona el método $.get() para enviar solicitudes GET a los servidores. El método toma dos parámetros: la URL al servidor y una función de devolución de llamada que se ejecuta si la petición tiene éxito.

Aquí tienes un ejemplo:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

Como se puede ver en el código anterior, el método $.get() toma como parámetros la URL (https://jsonplaceholder.typicode.com/users) y una función anónima de devolución de llamada.

A través de la función de devolución de llamada, puedes acceder a los datos de la solicitud y al estado de la misma. En nuestro caso, registramos los datos en la consola.

Así de sencillo es enviar una petición GET con jQuery.

Cómo enviar una solicitud POST en JavaScript utilizando jQuery

Para enviar una solicitud POST con jQuery, utilizamos el método $.post(). Toma tres parámetros: la URL, los datos que se enviarán al servidor y una función de devolución de llamada.

const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
  console.log(data);
});

En el código anterior, creamos un objeto para enviarlo al servidor y lo almacenamos en una variable llamada body. Esta variable se pasó como segundo parámetro en el método $.post().

Utilizando la función de devolución de llamada, registramos el resultado de la petición en la consola.

3. Cómo hacer peticiones asíncronas en jQuery utilizando el método $.ajax()

Antes de proceder al envío de peticiones PATCH y DELETE, vamos a hablar del método $.ajax().

El método $.ajax() en jQuery se utiliza para realizar peticiones asíncronas.

La sintaxis es diferente a la de los demás.

Así es como harías una petición GET utilizando el método $.ajax():

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

El método $.ajax() tiene diferentes parámetros que podemos utilizar.

En el código anterior, el parámetro url especifica la URL al servidor, el parámetro type especifica el tipo de solicitud, y el parámetro success llama a una función de devolución de llamada si la solicitud tiene éxito.

En la siguiente sección, verás cómo enviar solicitudes PATCH y DELETE utilizando el método $.ajax() de jQuery.

Cómo enviar una solicitud PATCH en JavaScript utilizando el método $.ajax() de jQuery

En esta sección, verás cómo enviar solicitudes PATCH utilizando el método $.ajax() de jQuery.

Este es el código:

const body = JSON.stringify({
  body: "My PATCH request",
});
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/101",
  type: "PATCH",
  data: body,
  success: function (result) {
    console.log(result);
  },
});

En el código anterior, la propiedad a actualizar se almacena en la variable body. Ésta se utiliza como valor del parámetro data.

Si la solicitud tiene éxito, se ejecutará la función del parámetro success.

Cómo enviar una solicitud DELETE en JavaScript utilizando el método $.ajax() de jQuery

Enviar una solicitud DELETE utilizando el método $.ajax() de jQuery sólo requiere unas pocas líneas de código.

Aquí tienes un ejemplo:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/3",
  type: "DELETE",
  success: function (result) {
    console.log(result)
  },
});

Como se puede ver arriba, todo lo que tuvimos que hacer fue especificar la URL con el ID del objeto a eliminar, el tipo de solicitud y una función que se ejecuta si la solicitud tiene éxito.

Cómo utilizar el método $.getJSON en jQuery

El método $.getJSON proporciona una forma más corta de enviar solicitudes GET.

Para realizar una petición con éxito, sólo tienes que especificar la URL y la función de devolución de llamada. Aquí tienes un ejemplo:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

En el código anterior, hemos pasado la URL al servidor y la función que se ejecuta después de que la petición tenga éxito como parámetros del método $.getJSON.

El código anterior registrará en la consola una matriz de objetos con información del usuario.

4. Cómo hacer una petición HTTP en JavaScript utilizando la API Fetch

La API fetch es una de las formas más populares de interactuar con los servidores utilizando JavaScript. Es una API nativa de JavaScript que tiene soporte para promesas al hacer peticiones.

La sintaxis para utilizar la API fetch es muy fácil de entender, como verás en las secciones siguientes.

Cómo enviar una solicitud GET en JavaScript utilizando la API Fetch

El envío de una solicitud GET utilizando la API fetch sólo requiere la URL. Ésta devuelve una promesa a la que puedes acceder utilizando el método then() o las palabras clave async y await.

Veamos un ejemplo:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

En el código anterior, pasamos la URL al método fetch; éste devuelve una promesa. A continuación, accedimos a la respuesta del servidor mediante el método then(). La respuesta se convirtió en un objeto JSON mediante el método response.json().

Tras obtener la respuesta, utilizamos otro método then() para registrar los datos en la consola.

Cómo enviar una solicitud POST en JavaScript utilizando la API Fetch

El método fetch tiene un segundo parámetro que nos permite especificar el cuerpo (datos a enviar) y el tipo de solicitud a enviar. Este segundo parámetro nos permite enviar peticiones POST y PATCH.

Echa un vistazo a este código de ejemplo:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

En el código anterior, añadimos opciones de solicitud en el segundo parámetro del método fetch. method se utilizó para especificar el tipo de solicitud, body especificó los datos que se enviarían al servidor y headers se utilizó para especificar que enviaríamos datos JSON al servidor.

Como hicimos antes al enviar una petición GET, se accedió a la promesa/respuesta devuelta utilizando el método then().

Cómo enviar una solicitud PUT en JavaScript utilizando la API Fetch

En otras secciones en las que enviamos una petición para actualizar un objeto en el servidor, hicimos uso de PATCH. En esta sección, utilizaremos PUT, que te permite actualizar la totalidad de un objeto.

Aquí tienes un ejemplo que utiliza la API fetch:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Como estamos enviando una solicitud PUT, se nos pide que proporcionemos los datos que se van a actualizar, que se pasan como valor a la opción de solicitud body.

También especificamos el ID del objeto a actualizar como último parámetro de la URL. Si la petición se ejecuta correctamente, deberías ver el objeto actualizado registrado en la consola.

Cómo enviar una solicitud DELETE en JavaScript utilizando la API Fetch

Enviar una solicitud DELETE es bastante sencillo: todo lo que tienes que hacer es especificar el ID del objeto que se va a eliminar. Puedes utilizar el método then() para recibir la respuesta del servidor, como hemos hecho con las otras peticiones.

Aquí tienes un ejemplo rápido:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

El código anterior eliminará un objeto con un ID de 3.

5. Cómo hacer una petición HTTP en JavaScript usando Axios

Axios es una biblioteca de terceros basada en promesas para enviar peticiones HTTP. Al igual que la mayoría de los clientes HTTP modernos, simplifica el proceso de envío de solicitudes a un servidor.

En esta sección, aprenderás a enviar peticiones GET, POST, PUT y DELETE a un servidor utilizando Axios.

Ten en cuenta que Axios no está integrado en JavaScript: tendrás que instalarlo por separado para poder utilizar su funcionalidad. Para instalar Axios en tu proyecto, ejecuta el siguiente comando en el terminal de tu proyecto:

npm install axios

Cómo enviar una solicitud GET en JavaScript utilizando Axios

Para enviar una solicitud GET utilizando Axios, sólo tienes que pasar la URL al método get(), que devuelve una promesa. Se puede acceder a la respuesta devuelta por la promesa mediante el método then().

Veamos un ejemplo:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

El código anterior registrará una matriz de objetos que contiene los datos devueltos por el servidor. Te darás cuenta de que no hemos tenido que cambiar los objetos devueltos a objetos JSON — Axios se encarga de esto bajo el capó, y puedes acceder a los datos utilizando response.data.

Para detectar cualquier error, utilizamos el método catch().

Cómo enviar una solicitud POST en JavaScript con Axios

La petición POST en Axios toma dos parámetros: la URL y los datos a enviar al servidor. Puedes almacenar los datos en una variable o pasarlos directamente como parámetro.

A continuación te explicamos cómo hacerlo:

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "POST request with Axios",
  body: "POST request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

En el ejemplo anterior, estamos enviando datos al servidor. Los datos se pasan como segundo parámetro al método post().

Si la solicitud se envía con éxito, verás el resultado registrado en la consola.

Cómo enviar una solicitud PUT en JavaScript con Axios

Enviar una solicitud PUT con Axios es similar a enviar una solicitud POST. Para enviar una petición PUT, debes especificar la URL (incluyendo el ID del objeto a actualizar) y los datos a actualizar como segundo parámetro en el método put().

El ejemplo siguiente actualizará un objeto con un ID de 10:

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
  title: "PUT request with Axios",
  body: "PUT request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Cómo enviar una solicitud DELETE en JavaScript con Axios

Para enviar una solicitud DELETE, debes especificar el ID del objeto a eliminar en la URL.

Como siempre, tienes que especificar la URL junto con el ID del objeto que se va a borrar.

Aquí tienes un ejemplo:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

6. Cómo hacer una petición HTTP en JavaScript usando SuperAgent

SuperAgent es una de las bibliotecas más antiguas construidas para realizar peticiones HTTP en JavaScript. Al igual que Axios, admite promesas y tiene métodos preconstruidos para enviar diversas peticiones HTTP a los servidores.

Para utilizar SuperAgent, instálalo con el siguiente comando:

npm install superagent

Empezaremos con un ejemplo de solicitud GET.

Cómo enviar una petición GET en JavaScript con SuperAgent

SuperAgent nos proporciona un método get() para enviar solicitudes GET. La URL se pasa como parámetro del método.

La promesa devuelta por la petición puede evaluarse entonces con el método end(), como se ve en este ejemplo:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

Cómo enviar una solicitud POST en JavaScript utilizando el SuperAgent

Al enviar una solicitud POST con SuperAgent, pasas los datos que se van a enviar al servidor como parámetro del método send() de SuperAgent:

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
  title: "POST request with SuperAgent",
  body: "POST request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

En el código anterior, la URL se pasó como parámetro del método post(). Los datos a enviar se pasaron al método send(). Utilizando el método end(), obtuvimos el resultado de la respuesta del servidor.

Cómo enviar una solicitud PUT en JavaScript utilizando el Superagente

Puedes enviar una solicitud PUT en SuperAgent utilizando el método put(). Al igual que en el ejemplo de la última sección, los datos a actualizar se pasarían como parámetro al método send().

Aquí tienes un ejemplo:

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
  title: "PUT request with SuperAgent",
  body: "PUT request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Cómo enviar una solicitud de borrado en JavaScript con el Superagente

Para enviar una solicitud de borrado, sólo tienes que especificar el ID del objeto a borrar en la URL. Éste se utilizará como parámetro en el método delete().

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

7. Cómo hacer una petición HTTP en JavaScript utilizando Qwest

Qwest es una biblioteca AJAX para interactuar con servidores. Actualmente está archivada en GitHub — el creador dejó de mantener la biblioteca con la aparición de la API fetch y Axios.

Qwest también admite el uso de promesas.

En las siguientes subsecciones, verás cómo enviar solicitudes GET, POST, PUT y DELETE utilizando Qwest.

Cómo enviar una solicitud GET en JavaScript utilizando Qwest

Qwest tiene un método get() que puede utilizarse para enviar solicitudes GET. A continuación te explicamos cómo utilizarlo:

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

Cómo enviar una solicitud POST en JavaScript utilizando Qwest

Como segundo parámetro, se pasarán al método post() los datos que se enviarán al servidor. El primer parámetro es la URL.

Aquí tienes un ejemplo:

qwest.post("https://jsonplaceholder.typicode.com/posts", {
  title: 'POST request with Qwest',
  body: 'POST request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Cómo enviar una solicitud PUT en JavaScript utilizando Qwest

La sintaxis aquí es la misma que la de la sección anterior. Lo único que tienes que cambiar es el tipo de solicitud y, a continuación, especificar el ID del objeto a actualizar junto con los datos con los que quieres actualizar el objeto.

Echa un vistazo a este ejemplo:

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
  title: 'PUT request with Qwest',
  body: 'PUT request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Observa que el ID se especifica en la URL y no en el objeto que se envía al servidor.

Cómo enviar una solicitud DELETE en JavaScript utilizando Qwest

Como es habitual, para eliminar un objeto de un servidor, tienes que especificar la URL y el ID del objeto a eliminar. Tanto la URL como el ID del objeto a eliminar se pasarán como parámetro al método delete() de Qwest.

Aquí tienes un ejemplo:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Una vez que la solicitud se ejecute con éxito, se eliminará un objeto con el ID 30.

Resumen

Nuestra capacidad para interactuar con los servidores utilizando JavaScript ha evolucionado a lo largo de los años. Con una comunidad creciente y activa de desarrolladores de JavaScript, se siguen haciendo cambios constantes y se introducen nuevas herramientas para hacer el proceso más sencillo y fácil.

Los métodos que se exponen en este tutorial no sólo se aplican a los servidores remotos, sino que también pueden utilizarse para interactuar con tus propios servidores cuando construyas aplicaciones web de pila completa. También funcionan con numerosas bibliotecas y frameworks de JavaScript.

En este tutorial, te hemos enseñado a realizar peticiones HTTP en JavaScript. Hemos dado varios ejemplos y explicaciones que mostraban cómo enviar peticiones GET, POST, PUT/PATCH y DELETE utilizando métodos incorporados en JavaScript y librerías de terceros.

Construir y desplegar un sitio web puede ser una tarea tediosa, independientemente de tus conocimientos. Pero Kinsta lo hace fácil y sin esfuerzo con DevKinsta. Utilizado por más de 25.000 desarrolladores, diseñadores web y autónomos, DevKinsta ofrece un entorno local para el desarrollo de temas y plugins de WordPress, entre otros. ¡Compruébalo!