L’interaction entre le frontend et le backend des sites web est rendue possible par les requêtes HTTP. Des fonctionnalités telles que la mise à jour d’un nouvel/ancien utilisateur dans une base de données, la publication d’un article de blog à partir de votre tableau de bord WordPress, la suppression d’une photo de votre profil et la mise à jour de votre bio nécessitent toutes une interaction entre un serveur et un client pour modifier des données.

Lorsque nous créons des applications web – aussi bien des applications web frontend que des applications web full stack – nous interagissons souvent avec des données stockées sur différentes bases de données et différents serveurs. Ces serveurs peuvent appartenir à des tiers ou être créés par les développeurs d’un projet.

Pour interagir avec ces serveurs, nous pouvons faire usage de différentes méthodes HTTP pour demander des données. Nous pouvons créer, lire, mettre à jour et supprimer (Create Read Update Delete ou CRUD) des données sur les serveurs en utilisant des verbes HTTP dédiés comme POST, GET, PUT/PATCH et DELETE.

Dans ce tutoriel, vous apprendrez les différentes façons de faire des requêtes HTTP à des serveurs distants et d’effectuer des opérations CRUD en JavaScript.

Chaque section présentera une nouvelle méthode d’envoi de requêtes HTTP. Nous commencerons par les méthodes intégrées comme l’API fetch et l’objet XMLHttpRequest avant de nous pencher sur certaines bibliothèques de requêtes HTTP open source comme Axios et SuperAgent.

C’est parti !

Qu’est-ce qu’une requête HTTP en JavaScript ?

Les requêtes HTTP en JavaScript sont un ensemble de méthodes prédéfinies utilisées pour interagir avec les données stockées sur les serveurs.

Chaque requête envoyée à un serveur comprend un point de terminaison et le type de requête envoyée. Vous pouvez voir un point de terminaison comme une passerelle entre deux programme : le client et le serveur.

Le client est le programme qui envoie une requête tandis que le serveur est celui qui reçoit la requête. Le serveur renvoie une réponse en fonction de la validité de la requête. Si la requête est réussie, le serveur renvoie des données au format XML ou JSON (JSON dans la plupart des cas), et si la requête échoue, le serveur renvoie un message d’erreur.

Les réponses renvoyées par le serveur sont généralement associées à des codes d’état. Ces codes nous aident à comprendre ce que le serveur essaie de dire lorsqu’il reçoit une requête. Voici quelques-uns d’entre eux et leur signification :

  • 100-199 dénote une réponse informative.
  • 200-299 dénote une requête réussie.
  • 300-399 dénote une redirection.
  • 400-499 dénote une erreur du client.
  • 500-599 indique une erreur du serveur.

Nous parlerons davantage de certains d’entre eux dans les sections qui suivent.

Dans la section suivante, vous verrez les différentes façons d’effectuer des requêtes HTTP en JavaScript.

Comment effectuer une requête HTTP en JavaScript

Cette section est divisée en sous-sections, chaque section vous enseignant différentes méthodes que vous pouvez utiliser pour effectuer des requêtes HTTP en JavaScript.

Chaque méthode abordée sera accompagnée d’un exemple montrant comment envoyer des requêtes POST, GET, PUT/PATCH et DELETE aux serveurs.

JSON Placeholder servira de serveur/point de terminaison distant où toutes nos requêtes seront envoyées.

Plongeons dans l’aventure !

1. Comment faire une requête HTTP en JavaScript en utilisant XMLHttpRequest (AJAX)

XMLHttpRequest est un objet JavaScript intégré utilisé pour interagir avec les serveurs et charger le contenu des pages web sans recharger le navigateur.

Dans cette section, vous verrez comment envoyer des requêtes POST, GET, PUT/PATCH et DELETE à l’aide de XMLHttpRequest.

AJAX est utilisé pour effectuer des requêtes HTTP asynchrones. Cela signifie simplement que pendant que la réponse à une requête est en attente, d’autres parties de votre code JavaScript peuvent continuer à s’exécuter sans attendre que la requête soit terminée.

Vous pouvez également pousser des modifications à une section particulière de votre page web sans obliger le visiteur à recharger la page entière en utilisant AJAX.

AJAX, par défaut, fonctionne avec l’objet XMLHttpRequest, les exemples de cette section peuvent donc être considérés comme des requêtes AJAX.

Comment envoyer une requête GET en JavaScript à l’aide de XMLHttpRequest

Vous faites appel à la requête GET lorsque vous souhaitez récupérer des données sur un serveur. Pour envoyer une requête GET réussie à l’aide de XMLHttpRequest en JavaScript, vous devez vous assurer que les éléments suivants sont effectués correctement :

  1. Créez un nouvel objet XMLHttpRequest.
  2. Ouvrez une connexion en spécifiant le type de requête et le point de terminaison (l’URL du serveur).
  3. Envoyez la requête.
  4. Écoutez la réponse du serveur.

Maintenant que nous avons vu certaines des étapes de l’envoi d’une requête POST à l’aide de XMLHttpRequest, voyons un exemple de code ː

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}`);
  }
};

Nous allons décomposer le code ci-dessus pour vous aider à comprendre ce qui se passe ici.

La première chose que nous avons faite est de créer un nouvel objet XMLHttpRequest et de le stocker dans une variable appelée xhr. C’est-à-dire :

const xhr = new XMLHttpRequest();

Nous avons ensuite spécifié le type de requête (GET) et le point de terminaison vers lequel la requête sera envoyée (dans ce cas, « https://jsonplaceholder.typicode.com/users ») ː

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

Afin d’envoyer la requête au serveur, nous avons utilisé la méthode send().

Lorsque le serveur renvoie des données, vous pouvez spécifier le format dans lequel les données sont renvoyées.

Dans la plupart des cas, le format JSON est utilisé. Nous avons donc fait en sorte que nos données soient renvoyées en JSON en ajoutant ceci :

xhr.responseType = "json";

À ce stade, nous avons envoyé avec succès une requête GET. La prochaine chose à faire est d’écouter ce que dit le serveur en utilisant un écouteur d’évènements :

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

Dans le code ci-dessus, nous utilisons l’écouteur d’évènements onload. En utilisant une déclaration if, nous avons vérifié l’état de la réponse du serveur.

Si l’état du client est 4 (DONE) et si le code d’état est 200 (successful), les données seront enregistrées dans la console. Sinon, un message d’erreur indiquant l’état d’erreur apparaitra.

Si vous avez suivi jusqu’à ce point sans aucune erreur, vous devriez avoir un tableau d’objets dans votre console ː

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

Il s’agit des données récupérées sur le serveur.

Comment envoyer une requête POST en JavaScript en utilisant XMLHttpRequest

Avec la requête POST, vous pouvez envoyer de nouvelles informations (données) au serveur/base de données sous forme d’objet. L’objet peut être des informations sur un nouvel utilisateur, une nouvelle entrée de liste de tâches, ou tout autre élément que vous devez consigner.

L’exemple de code que vous verrez dans cette section est similaire à celui de la dernière section. La principale différence est que les requêtes POST nécessitent certaines informations qui sont généralement stockées dans un objet avant d’être envoyées au serveur.

Voici un exemple :

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);

Dans le code ci-dessus, les informations à envoyer au serveur sont stockées dans une variable appelée body. Elle contient trois propriétés ː title, body, et userId.

Notez que la variable body qui contient l’objet doit être convertie en objet JSON avant d’être envoyée au serveur. La conversion est effectuée à l’aide de la méthode JSON.stringify().

Pour s’assurer que l’objet JSON est envoyé au serveur, il est transmis en tant que paramètre à la méthode send():

xhr.send(body);

Comment envoyer une demande PATCH en JavaScript à l’aide de XMLHttpRequest

La requête PATCH est utilisée pour mettre à jour les propriétés spécifiées d’un objet. Elle est différente de la méthode PUT, qui met à jour l’intégralité d’un objet.

Voici un exemple de requête PATCH utilisant 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);

Le code ci-dessus, en cas de succès, enregistrera la partie de l’objet qui a été mise à jour et envoyée au serveur.

Comment envoyer une requête DELETE en JavaScript à l’aide de XMLHttpRequest

Comme son nom l’indique, la méthode DELETE est utilisée pour supprimer des données d’un serveur. Il en va de même pour toute méthode HTTP en JavaScript.

Dans la plupart des cas, vous devrez spécifier l’ID des données que vous souhaitez supprimer. L’ID est généralement un paramètre dans le point de terminaison/URL.

Voyons un exemple de requête 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();

Le code ci-dessus supprimera un objet avec un post ayant un ID de 3 comme spécifié dans le point de terminaison (« https://jsonplaceholder.typicode.com/posts/3 »).

2. Comment faire une requête HTTP en JavaScript en utilisant jQuery

jQuery simplifie le processus d’obtention de données à partir de serveurs en rendant la syntaxe plus courte et plus directe.

Dans cette section, vous verrez comment effectuer des requêtes HTTP à l’aide de différentes méthodes jQuery.

Comment envoyer une requête GET en JavaScript à l’aide de jQuery

jQuery nous fournit la méthode $.get() pour envoyer des requêtes GET aux serveurs. Cette méthode prend en compte deux paramètres – l’URL du serveur et une fonction de rappel qui s’exécute si la requête est réussie.

Voici un exemple :

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

Comme on peut le voir dans le code ci-dessus, la méthode $.get() a pris l’URL (https://jsonplaceholder.typicode.com/users) et une fonction de rappel anonyme comme paramètres.

Grâce à la fonction de rappel, vous pouvez accéder aux données de la requête et à l’état de la requête. Dans notre cas, nous avons enregistré les données dans la console.

Voilà à quel point il est simple d’envoyer une requête GET à l’aide de jQuery.

Comment envoyer une requête POST en JavaScript à l’aide de jQuery

Pour envoyer une requête POST à l’aide de jQuery, nous utilisons la méthode $.post(). Elle prend trois paramètres – l’URL, les données à envoyer au serveur et une fonction de rappel.

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);
});

Dans le code ci-dessus, nous avons créé un objet à envoyer au serveur et l’avons stocké dans une variable appelée body. Cette variable a été transmise comme deuxième paramètre dans la méthode $.post().

À l’aide de la fonction de rappel, nous avons enregistré le résultat de la requête dans la console.

3. Comment effectuer des requêtes asynchrones dans jQuery en utilisant la méthode $.ajax()

Avant de passer à l’envoi de requêtes PATCH et DELETE, parlons de la méthode $.ajax().

La méthode $.ajax() dans jQuery est utilisée pour effectuer des requêtes asynchrones.

La syntaxe est différente des autres.

Voici comment vous feriez une requête GET en utilisant la méthode $.ajax():

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

La méthode $.ajax() possède différents paramètres que nous pouvons utiliser.

Dans le code ci-dessus, le paramètre url spécifie l’URL du serveur, le paramètre type spécifie le type de requête, et le paramètre success appelle une fonction de rappel si la requête est réussie.

Dans la section suivante, vous verrez comment envoyer des demandes PATCH et DELETE à l’aide de la méthode $.ajax() de jQuery.

Comment envoyer une requête PATCH en JavaScript à l’aide de la méthode $.ajax() de jQuery ?

Dans cette section, vous verrez comment envoyer des requêtes PATCH à l’aide de la méthode $.ajax() de jQuery.

Voici le code :

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);
  },
});

Dans le code ci-dessus, la propriété à mettre à jour est stockée dans la variable body. Elle est ensuite utilisée comme valeur pour le paramètre data.

Si la requête aboutit, la fonction du paramètre success est exécutée.

Comment envoyer une demande DELETE en JavaScript à l’aide de la méthode $.ajax() de jQuery ?

L’envoi d’une requête DELETE à l’aide de la méthode $.ajax() de jQuery ne nécessite que quelques lignes de code.

Voici un exemple :

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

Comme on peut le voir ci-dessus, tout ce que nous avons eu à faire est de spécifier l’URL avec l’ID de l’objet à supprimer, le type de requête et une fonction qui s’exécute si la requête est réussie.

Comment utiliser la méthode $.getJSON dans jQuery

La méthode $.getJSON offre un moyen plus court d’envoyer des requêtes GET.

Pour effectuer une requête réussie, il vous suffit de spécifier l’URL et la fonction de rappel. Voici un exemple :

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

Dans le code ci-dessus, nous avons transmis l’URL du serveur et la fonction qui s’exécute après la réussite de la requête comme paramètres à la méthode $.getJSON.

Le code ci-dessus enregistrera un tableau d’objets contenant des informations sur l’utilisateur dans la console.

4. Comment effectuer une requête HTTP en JavaScript à l’aide de l’API Fetch ?

L’API fetch est l’un des moyens les plus populaires d’interagir avec les serveurs en utilisant JavaScript. Il s’agit d’une API JavaScript native qui prend en charge les promesses lors des requêtes.

La syntaxe d’utilisation de l’API fetch est très facile à comprendre, comme vous le verrez dans les sections qui suivent.

Comment envoyer une requête GET en JavaScript à l’aide de l’API Fetch

L’envoi d’une requête GET à l’aide de l’API fetch ne nécessite que l’URL. Celle-ci renvoie alors une promesse à laquelle vous pouvez accéder à l’aide de la méthode then() ou des mots-clés async et await.

Voyons un exemple :

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

Dans le code ci-dessus, nous avons transmis l’URL à la méthode fetch, qui renvoie une promesse. Nous avons ensuite accédé à la réponse du serveur à l’aide de la méthode then(). La réponse a été convertie en un objet JSON à l’aide de la méthode response.json().

Après avoir obtenu la réponse, nous avons ensuite utilisé une autre méthode then() pour enregistrer les données dans la console.

Comment envoyer une requête POST en JavaScript à l’aide de l’API Fetch

La méthode fetch possède un deuxième paramètre qui nous permet de spécifier le corps (données à envoyer) et le type de requête à envoyer. Ce deuxième paramètre nous permet d’envoyer des requêtes POST et PATCH.

Jetez un coup d’œil à cet exemple de code :

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));

Dans le code ci-dessus, nous avons ajouté des options de requête dans le deuxième paramètre de la méthode fetch. method a été utilisé pour spécifier le type de requête, body a spécifié les données à envoyer au serveur, et headers a été utilisé pour spécifier que nous enverrions des données JSON au serveur.

Comme nous l’avons fait précédemment lors de l’envoi d’une requête GET, la promesse/réponse renvoyée était accessible à l’aide de la méthode then().

Comment envoyer une requête PUT en JavaScript à l’aide de l’API Fetch

Dans les autres sections où nous avons envoyé une requête pour mettre à jour un objet dans le serveur, nous avons fait usage de PATCH. Dans cette section, nous allons utiliser PUT, qui vous permet de mettre à jour l’intégralité d’un objet.

Voici un exemple utilisant l’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));

Puisque nous envoyons une requête PUT, nous devons fournir les données à mettre à jour, qui sont transmises comme valeur à l’option de requête body.

Nous avons également spécifié l’ID de l’objet à mettre à jour comme dernier paramètre de l’URL. Si la requête s’exécute avec succès, vous devriez voir l’objet mis à jour enregistré dans la console.

Comment envoyer une requête DELETE en JavaScript à l’aide de l’API Fetch

L’envoi d’une requête DELETE est assez simple : il vous suffit de spécifier l’ID de l’objet à supprimer. Vous pouvez utiliser la méthode then() pour recevoir la réponse du serveur, comme nous l’avons fait avec les autres requêtes.

Voici un exemple rapide :

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

Le code ci-dessus va supprimer un objet avec un ID de 3.

5. Comment effectuer une requête HTTP en JavaScript à l’aide d’Axios

Axios est une bibliothèque tierce basée sur les promesses pour l’envoi de requêtes HTTP. Comme la plupart des clients HTTP modernes, elle simplifie le processus d’envoi de requêtes à un serveur.

Dans cette section, vous apprendrez à envoyer des requêtes GET, POST, PUT et DELETE à un serveur à l’aide d’Axios.

Notez qu’Axios n’est pas intégrée à JavaScript – vous devrez l’installer séparément pour utiliser ses fonctionnalités. Pour installer Axios dans votre projet, exécutez la commande ci-dessous dans le terminal de votre projet:

npm install axios

Comment envoyer une requête GET en JavaScript à l’aide d’Axios

Pour envoyer une requête GET à l’aide d’Axios, il vous suffit de transmettre l’URL à la méthode get(), qui renvoie une promesse. La réponse renvoyée par la promesse est accessible à l’aide de la méthode then().

Voyons un exemple :

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

Le code ci-dessus va enregistrer un tableau d’objets contenant les données renvoyées par le serveur. Vous remarquerez que nous n’avons pas eu à transformer les objets renvoyés en objets JSON – Axios s’en charge en arrière-plan, et vous pouvez accéder aux données à l’aide de response.data.

Pour détecter les erreurs éventuelles, nous avons utilisé la méthode catch().

Comment envoyer une requête POST en JavaScript avec Axios ?

La requête POST dans Axios prend deux paramètres – l’URL et les données à envoyer au serveur. Vous pouvez stocker les données dans une variable ou les transmettre directement en tant que paramètre.

Voici comment procéder :

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))

Dans l’exemple ci-dessus, nous envoyons des données au serveur. Les données sont transmises comme deuxième paramètre à la méthode post().

Si la requête est envoyée avec succès, vous verrez le résultat enregistré dans la console.

Comment envoyer une requête PUT en JavaScript à l’aide d’Axios

L’envoi d’une requête PUT avec Axios est similaire à l’envoi d’une requête POST. Pour envoyer une requête PUT, vous spécifiez l’URL (y compris l’ID de l’objet à mettre à jour) et les données à mettre à jour en tant que deuxième paramètre dans la méthode put().

L’exemple ci-dessous met à jour un objet dont l’ID est 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))

Comment envoyer une requête DELETE en JavaScript à l’aide d’Axios

Pour envoyer une demande DELETE, vous devez spécifier l’ID de l’objet à supprimer dans l’URL.

Comme d’habitude, vous devez spécifier l’URL ainsi que l’ID de l’objet à supprimer.

Voici un exemple :

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

6. Comment effectuer une requête HTTP en JavaScript à l’aide de SuperAgent

SuperAgent est l’une des plus anciennes bibliothèques conçues pour effectuer des requêtes HTTP en JavaScript. Tout comme Axios, elle prend en charge les promesses et dispose de méthodes prédéfinies pour envoyer diverses requêtes HTTP aux serveurs.

Pour utiliser SuperAgent, installez-le à l’aide de la commande ci-dessous :

npm install superagent

Nous allons commencer par un exemple de requête GET.

Comment envoyer une requête GET en JavaScript à l’aide de SuperAgent

SuperAgent nous fournit une méthode get() pour envoyer des requêtes GET. L’URL est transmise en tant que paramètre de la méthode.

La promesse renvoyée par la requête peut ensuite être évaluée à l’aide de la méthode end(), comme on le voit dans cet exemple :

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

Comment envoyer une requête POST en JavaScript à l’aide de SuperAgent

Lorsque vous envoyez une requête POST à l’aide de SuperAgent, vous transmettez les données à envoyer au serveur en tant que paramètre à la méthode 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);
});

Dans le code ci-dessus, l’URL a été transmise en tant que paramètre de la méthode post(). Les données à envoyer ont été passées dans la méthode send(). En utilisant la méthode end(), nous avons obtenu le résultat de la réponse du serveur.

Comment envoyer une requête PUT en JavaScript à l’aide de SuperAgent

Vous pouvez envoyer une requête PUT dans SuperAgent en utilisant la méthode put(). Comme dans l’exemple de la dernière section, les données à mettre à jour sont transmises en tant que paramètre à la méthode send().

Voici un exemple :

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);
});

Comment envoyer une requête DELETE en JavaScript à l’aide de SuperAgent

Pour envoyer une requête de suppression, il suffit de spécifier l’ID de l’objet à supprimer dans l’URL. Celui-ci sera utilisé comme paramètre dans la méthode delete().

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

7. Comment effectuer une requête HTTP en JavaScript à l’aide de Qwest

Qwest est une bibliothèque AJAX pour interagir avec les serveurs. Elle est actuellement archivée sur GitHub – le créateur a abandonné la maintenance de la bibliothèque avec l’émergence de l’API fetch et d’Axios.

Qwest prend également en charge l’utilisation de promesses.

Dans les sous-sections suivantes, vous verrez comment envoyer des requêtes GET, POST, PUT et DELETE à l’aide de Qwest.

Comment envoyer une requête GET en JavaScript en utilisant Qwest

Qwest possède une méthode get() qui peut être utilisée pour envoyer des requêtes GET. Voici comment l’utiliser :

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

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

Comment envoyer une requête POST en JavaScript à l’aide de Qwest

Comme deuxième paramètre, les données à envoyer à un serveur seront transmises à la méthode post(). Le premier paramètre est l’URL.

Voici un exemple :

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)
});

Comment envoyer une requête PUT en JavaScript en utilisant Qwest

La syntaxe ici est la même que celle de la section précédente. Tout ce que vous devez changer est le type de requête et ensuite spécifier l’ID de l’objet à mettre à jour ainsi que les données avec lesquelles vous voulez mettre à jour l’objet.

Jetez un coup d’oeil à cet exemple :

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)
});

Notez que l’ID est spécifié dans l’URL et non dans l’objet envoyé au serveur.

Comment envoyer une requête DELETE en JavaScript en utilisant Qwest

Comme d’habitude, pour supprimer un objet d’un serveur, vous devez spécifier l’URL et l’ID de l’objet à supprimer. L’URL et l’ID de l’objet à supprimer seront transmis en tant que paramètre à la méthode delete() de Qwest.

Voici un exemple :

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

Une fois la requête exécutée avec succès, un objet avec l’ID de 30 sera supprimé.

Résumé

Notre capacité à interagir avec les serveurs à l’aide de JavaScript a évolué au fil des ans. Avec une communauté croissante et active de développeurs JavaScript, des changements constants sont toujours apportés et de nouveaux outils introduits pour rendre le processus plus simple et plus facile.

Les méthodes abordées dans ce tutoriel ne s’appliquent pas uniquement aux serveurs distants – elles peuvent également être utilisées pour interagir avec vos propres serveurs lors de la création d’applications web complètes. Elles fonctionnent également avec de nombreuses bibliothèques et frameworks JavaScript.

Dans ce tutoriel, nous vous avons appris à effectuer des requêtes HTTP en JavaScript. Nous avons donné divers exemples et explications qui montrent comment envoyer des requêtes GET, POST, PUT/PATCH et DELETE à l’aide de méthodes JavaScript intégrées et de bibliothèques tierces.

Construire et déployer un site web peut être une tâche fastidieuse, quelles que soient vos compétences. Mais Kinsta rend cela facile et sans effort avec DevKinsta. Utilisé par plus de 25.000 développeurs, concepteurs web et indépendants, DevKinsta offre un environnement local pour développer des thèmes WordPress, des extensions, et plus encore. Découvrez-le !