JavaScript tiene excelentes módulos y métodos para hacer solicitudes HTTP que pueden ser usados para enviar o recibir datos desde un recurso del lado del servidor. En este artículo, vamos a ver algunas formas populares de hacer solicitudes HTTP en JavaScript.
Ajax
Ajax es la forma tradicional de hacer una solicitud HTTP asincrónica. Los datos pueden ser enviados usando el método HTTP POST y recibidos usando el método HTTP GET. Echemos un vistazo y hagamos una solicitud GET. Utilizaré JSONPlaceholder, una API REST online gratuita para desarrolladores que devuelve datos aleatorios en formato JSON.
Para hacer una llamada HTTP en Ajax, es necesario inicializar un nuevo método XMLHttpRequest()
, especificar el endpoint URL y el método HTTP (en este caso GET). Finalmente, usamos el método open()
para unir el método HTTP y el punto final de la URL y llamar al método send()
para lanzar la solicitud.
Registraremos la respuesta HTTP en la consola utilizando la propiedad XMLHTTPRequest.onreadystatechange
que contiene el manejador de eventos que se llamará cuando se dispare el evento readystatechanged
.
![image](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image.png)
const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}
Si ves la consola de tu navegador, te devolverá una matriz de datos en formato JSON. ¿Pero cómo sabremos si la solicitud se ha hecho? En otras palabras, ¿cómo podemos manejar las respuestas con Ajax?
La propiedad de onreadystatechange
tiene dos métodos, readyState
y status
que nos permiten comprobar el estado de nuestra solicitud.
![image-1](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-1.png)
Si readyState
es igual a 4, significa que la solicitud está completada. La propiedad readyState
tiene 5 respuestas. Aprenda más sobre esto aquí.
Aparte de hacer directamente una llamada Ajax con JavaScript, hay otros métodos más poderosos de hacer una llamada HTTP como $.Ajax
que es un método de jQuery. Ahora hablaré de eso.
Métodos de jQuery
jQuery tiene muchos métodos para manejar fácilmente las solicitudes HTTP. Para poder usar estos métodos, necesitarás incluir la biblioteca jQuery en tu proyecto.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$.ajax
jQuery Ajax es uno de los métodos más simples para hacer una llamada HTTP.
![image-2](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-2.png)
El método $.ajax
toma muchos parámetros, algunos de los cuales son obligatorios y otros opcionales. Contiene dos opciones de callback success
y error
para manejar la respuesta recibida.
$.get
El método $.get
se utiliza para ejecutar solicitudes GET. Se necesitan dos parámetros: el endpoint y una función de callback.
![image-3](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-3.png)
$.post
El método $.post
es otra forma de enviar datos al servidor. Toma tres parámetros: la url
, los datos que quieres publicar y una función callback.
![image-4](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-4.png)
$.getJSON
El método $.getJSON
sólo recupera datos que están en formato JSON. Toma dos parámetros: la url
y una función callback.
![image-5](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-5.png)
jQuery tiene todos estos métodos para solicitar o enviar datos a un servidor remoto. Pero en realidad puedes usar todos estos métodos en uno solo: el método $.ajax
, como se ve en el siguiente ejemplo:
![image-6](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-6.png)
fetch
fetch
es una nueva y potente web API que permite hacer solicitudes asincrónicas. De hecho, fetch
es una de las mejores y mi forma favorita de hacer una solicitud HTTP. Devuelve una "Promesa (Promise)", que es una de las grandes características de ES6. Si no estás familiarizado con el ES6, puedes leer sobre él en este artículo. Promesas nos permite manejar la solicitud asíncrona de una manera más inteligente. Echemos un vistazo a cómo funciona técnicamente el fetch
.
![image-7](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-7.png)
La función fetch
toma un parámetro requerido: el endpoint
URL. También tiene otros parámetros opcionales como en el ejemplo siguiente:
![image-8](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-8.png)
Como puedes ver, fetch
tiene muchas ventajas para hacer solicitudes HTTP. Puedes aprender más sobre ello aquí. Además, dentro de fetch hay otros módulos y plugins que nos permiten enviar y recibir una solicitud desde y hacia el lado del servidor, como axios.
Axios
Axios es una biblioteca de código abierto para hacer solicitudes HTTP y proporciona muchas características muy buenas. Veamos cómo funciona.
Uso:
Primero, necesitarías incluir Axios. Hay dos maneras de incluir Axios en tu proyecto.
Primero, puedes usar npm:
npm install axios --save
Entonces necesitarías importarlo
import axios from 'axios'
Segundo, puedes incluir axios usando un CDN.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Haciendo una Solicitud con axios:
Con Axios puedes usar GET
y POST
para obtener y enviar datos al servidor.
GET:
![image-9](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-9.png)
axios
toma un parámetro requerido, y puede tomar un segundo parámetro opcional también. Esto toma ciertos datos como una simple consulta.
POST:
![image-10](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-10.png)
Axios devuelve una "Promesa". Si estás familiarizado con las promesas, probablemente sabes que una promesa puede ejecutar múltiples solicitudes. Puedes hacer lo mismo con Axios y ejecutar múltiples solicitudes al mismo tiempo.
![image-11](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-11.png)
Axios soporta muchos otros métodos y opciones. Puedes explorarlos aquí.
HttpClient de Angular
Angular tiene su propio módulo HTTP que funciona con las aplicaciones de Angular. Utiliza la biblioteca RxJS para manejar las solicitudes asincrónicas y proporciona muchas opciones para realizar las solicitudes HTTP.
Haciendo una llamada al servidor usando el HttpClient de Angular
Para hacer una solicitud usando el Angular HttpClient, tenemos que ejecutar nuestro código dentro de una aplicación Angular. Así que he creado una. Si no estás familiarizado con Angular, mira mi artículo, aprende a crear tu primera aplicación Angular en 20 minutos.
Lo primero que tenemos que hacer es importar HttpClientModule
en app.module.ts
![image-12](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-12.png)
Entonces, tenemos que crear un servicio para manejar las solicitudes. Puedes generar fácilmente un servicio usando el CLI Angular.
ng g service FetchdataService
A continuación, tenemos que importar el HttpClient en el servicio fetchdataService.ts
e inyectarlo dentro del constructor.
![image-13](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-13.png)
Y dentro de app.component.ts
importar fetchdataService
//import
import { FetchdataService } from './fetchdata.service';
Finalmente, llama al servicio y ejecutalo.
app.component.ts:
![image-14](https://www.freecodecamp.org/espanol/news/content/images/2020/11/image-14.png)
Puedes ver la demo de ejemplo en Stackblitz.
Terminando
Acabamos de cubrir las formas más populares de hacer una solicitud de llamada HTTP en JavaScript.
Gracias por tu tiempo. Si te gusta, aplaude hasta 50, haz clic en seguir y comunícate conmigo en Twitter.
Por cierto, recientemente he trabajado con un grupo de ingenieros de software para una de mis aplicaciones móviles. La organización fue genial, y el producto se entregó muy rápidamente, mucho más rápido que otras empresas y autónomos con los que he trabajado, y creo que puedo recomendarlos honestamente para otros proyectos que existen. Envíame un correo electrónico si quieres ponerte en contacto - said@devsdata.com.
Traducido del artículo de Said Hayani's - Here are the most popular ways to make an HTTP request in JavaScript.