Estas son las formas más populares de realizar una solicitud HTTP en JavaScript

JavaScript tiene excelentes módulos y métodos para realizar solicitudes HTTP que se pueden usar para enviar o recibir datos desde un recurso del lado del servidor. En este artículo, veremos algunas formas populares de realizar solicitudes HTTP en JavaScript.

Ajax

Ajax es la forma tradicional de realizar una solicitud HTTP asincrónica. Los datos pueden enviarse mediante el método HTTP POST y recibirse mediante el método HTTP GET. Echemos un vistazo y hagamos una GETsolicitud. Usaré JSONPlaceholder, una API REST en línea gratuita para desarrolladores que devuelve datos aleatorios en formato JSON.

Para realizar una llamada HTTP en Ajax, debe inicializar un nuevo XMLHttpRequest()método, especificar el punto final de la URL y el método HTTP (en este caso, GET). Finalmente, usamos el open()método para unir el método HTTP y el punto final de la URL y llamamos al send()método para disparar la solicitud.

Registramos la respuesta HTTP en la consola usando la XMLHTTPRequest.onreadystatechangepropiedad que contiene el controlador de eventos que se llamará cuando readystatechangedse active el evento.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Si ve la consola de su navegador, devolverá una matriz de datos en formato JSON. Pero, ¿cómo sabríamos si la solicitud está hecha? En otras palabras, ¿cómo podemos manejar las respuestas con Ajax?

La onreadystatechangepropiedad tiene dos métodos, readyStatey statusque nos permiten comprobar el estado de nuestra solicitud.

Si readyStatees igual a 4, significa que la solicitud está hecha. La readyStatepropiedad tiene 5 respuestas. Obtenga más información aquí.

Además de realizar directamente una llamada Ajax con JavaScript, existen otros métodos más poderosos para realizar una llamada HTTP, como el $.Ajaxque es un método jQuery. Hablaré de eso ahora.

métodos jQuery

jQuery tiene muchos métodos para manejar fácilmente las solicitudes HTTP. Para utilizar estos métodos, deberá incluir la biblioteca jQuery en su proyecto.

$ .ajax

jQuery Ajax es uno de los métodos más simples para realizar una llamada HTTP.

El método $ .ajax toma muchos parámetros, algunos de los cuales son obligatorios y otros opcionales. Contiene dos opciones de devolución de llamada successy errorpara manejar la respuesta recibida.

$ .get método

El método $ .get se utiliza para ejecutar solicitudes GET. Toma dos parámetros: el punto final y una función de devolución de llamada.

$ .post

El $.postmétodo es otra forma de publicar datos en el servidor. Se necesitan tres parámetros: el url, los datos que desea publicar y una función de devolución de llamada.

$ .getJSON

El $.getJSONmétodo solo recupera datos que están en formato JSON. Toma dos parámetros: urly una función de devolución de llamada.

jQuery tiene todos estos métodos para solicitar o publicar datos en un servidor remoto. Pero en realidad puede poner todos estos métodos en uno: el $.ajaxmétodo, como se ve en el siguiente ejemplo:

ir a buscar

fetches una nueva y potente API web que le permite realizar solicitudes asincrónicas. De hecho, fetches una de las mejores y mi forma favorita de realizar una solicitud HTTP. Devuelve una "Promesa", que es una de las grandes características de ES6.Si no está familiarizado con ES6, puede leerlo en este artículo. Las promesas nos permiten manejar la solicitud asincrónica de una manera más inteligente. Echemos un vistazo a cómo fetchfunciona técnicamente.

La fetchfunción toma un parámetro obligatorio: la endpointURL. También tiene otros parámetros opcionales como en el siguiente ejemplo:

Como puede ver, fetchtiene muchas ventajas para realizar solicitudes HTTP. Puedes aprender más acerca de esto aquí. Además, dentro de fetch hay otros módulos y complementos que nos permiten enviar y recibir una solicitud desde y hacia el servidor, como axios.

Axios

Axios es una biblioteca de código abierto para realizar solicitudes HTTP y proporciona muchas funciones excelentes. Echemos un vistazo a cómo funciona.

Uso:

Primero, necesitaría incluir Axios. Hay dos formas de incluir Axios en su proyecto.

Primero, puede usar npm:

npm install axios --save

Entonces deberías importarlo

import axios from 'axios'

En segundo lugar, puede incluir axios utilizando un CDN.

Hacer una solicitud con axios:

Con Axios puede utilizar GETy POSTrecuperar y publicar datos desde el servidor.

OBTENER:

axiostoma un parámetro requerido y también puede tomar un segundo parámetro opcional. Esto toma algunos datos como una simple consulta.

ENVIAR:

Axios devuelve una "Promesa". Si está familiarizado con las promesas, probablemente sepa que una promesa puede ejecutar múltiples solicitudes. Puede hacer lo mismo con axios y ejecutar varias solicitudes al mismo tiempo.

Axios admite muchos otros métodos y opciones. Puedes explorarlos aquí.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].