Voici les moyens les plus courants de faire une requête HTTP en JavaScript

JavaScript a d'excellents modules et méthodes pour effectuer des requêtes HTTP qui peuvent être utilisées pour envoyer ou recevoir des données à partir d'une ressource côté serveur. Dans cet article, nous allons examiner quelques méthodes populaires pour effectuer des requêtes HTTP en JavaScript.

Ajax

Ajax est le moyen traditionnel de faire une requête HTTP asynchrone. Les données peuvent être envoyées à l'aide de la méthode HTTP POST et reçues à l'aide de la méthode HTTP GET. Jetons un coup d'œil et faisons une GETdemande. J'utiliserai JSONPlaceholder, une API REST en ligne gratuite pour les développeurs qui renvoie des données aléatoires au format JSON.

Pour effectuer un appel HTTP en Ajax, vous devez initialiser une nouvelle XMLHttpRequest()méthode, spécifier le point de terminaison de l'URL et la méthode HTTP (dans ce cas GET). Enfin, nous utilisons la open()méthode pour lier la méthode HTTP et le point de terminaison d'URL et appelons la send()méthode pour déclencher la requête.

Nous enregistrons la réponse HTTP à la console en utilisant la XMLHTTPRequest.onreadystatechangepropriété qui contient le gestionnaire d'événements à appeler lorsque l' readystatechangedévénement est déclenché.

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

Si vous affichez la console de votre navigateur, il renverra un tableau de données au format JSON. Mais comment saurions-nous si la demande est acceptée? En d'autres termes, comment pouvons-nous gérer les réponses avec Ajax?

La onreadystatechangepropriété dispose de deux méthodes, readyStateet statusqui nous permettent de vérifier l'état de notre demande.

Si readyStateest égal à 4, cela signifie que la demande est terminée. La readyStatepropriété a 5 réponses. Apprenez-en plus ici.

En plus de passer directement un appel Ajax avec JavaScript, il existe d'autres méthodes plus puissantes pour effectuer un appel HTTP, comme par exemple $.Ajaxune méthode jQuery. Je vais en discuter maintenant.

Méthodes jQuery

jQuery a de nombreuses méthodes pour gérer facilement les requêtes HTTP. Pour utiliser ces méthodes, vous devrez inclure la bibliothèque jQuery dans votre projet.

$ .ajax

jQuery Ajax est l'une des méthodes les plus simples pour effectuer un appel HTTP.

La méthode $ .ajax prend de nombreux paramètres, dont certains sont obligatoires et d'autres facultatifs. Il contient deux options de rappel successet errorpour gérer la réponse reçue.

Méthode $ .get

La méthode $ .get est utilisée pour exécuter les requêtes GET. Il prend deux paramètres: le point de terminaison et une fonction de rappel.

$ .post

La $.postméthode est une autre façon de publier des données sur le serveur. Il faut trois paramètres: le url, les données que vous souhaitez publier et une fonction de rappel.

$ .getJSON

La $.getJSONméthode récupère uniquement les données au format JSON. Il prend deux paramètres: la urlet une fonction de rappel.

jQuery a toutes ces méthodes pour demander ou publier des données sur un serveur distant. Mais vous pouvez en fait mettre toutes ces méthodes en une seule: la $.ajaxméthode, comme le montre l'exemple ci-dessous:

chercher

fetchest une nouvelle API Web puissante qui vous permet d'effectuer des requêtes asynchrones. En fait, fetchc'est l'un des meilleurs et mes préférés pour faire une requête HTTP. Il renvoie une «promesse» qui est l'une des grandes fonctionnalités d'ES6.Si vous n'êtes pas familier avec ES6, vous pouvez en savoir plus dans cet article. Les promesses nous permettent de gérer la demande asynchrone de manière plus intelligente. Jetons un coup d'œil à comment fetchfonctionne techniquement.

La fetchfonction prend un paramètre obligatoire: l' endpointURL. Il a également d'autres paramètres facultatifs comme dans l'exemple ci-dessous:

Comme vous pouvez le voir, il fetchprésente de nombreux avantages pour effectuer des requêtes HTTP. Vous pouvez en savoir plus ici. De plus, dans fetch, il existe d'autres modules et plugins qui nous permettent d'envoyer et de recevoir une requête vers et depuis le serveur, tels que axios.

Axios

Axios est une bibliothèque open source pour faire des requêtes HTTP et fournit de nombreuses fonctionnalités intéressantes. Voyons comment cela fonctionne.

Usage:

Tout d'abord, vous devez inclure Axios. Il existe deux façons d'inclure Axios dans votre projet.

Tout d'abord, vous pouvez utiliser npm:

npm install axios --save

Ensuite, vous devez l'importer

import axios from 'axios'

Deuxièmement, vous pouvez inclure axios à l'aide d'un CDN.

Faire une demande avec axios:

Avec Axios, vous pouvez utiliser GETet POSTpour récupérer et publier des données depuis le serveur.

AVOIR:

axiosprend un paramètre obligatoire et peut également prendre un deuxième paramètre facultatif. Cela prend certaines données comme une simple requête.

PUBLIER:

Axios renvoie une "Promesse". Si vous connaissez les promesses, vous savez probablement qu'une promesse peut exécuter plusieurs demandes. Vous pouvez faire la même chose avec axios et exécuter plusieurs requêtes en même temps.

Axios prend en charge de nombreuses autres méthodes et options. Vous pouvez les explorer ici.

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].