Comment faire des requêtes HTTP synchrones en JavaScript ?

Dans le paysage numérique actuel, l'acte de faire une requête HTTP est un élément essentiel de la transmission et de la réception de données entre le client et le serveur. Les requêtes asynchrones sont devenues populaires car elles offrent une expérience non bloquante, qui améliore finalement l'expérience utilisateur globale. Cependant, dans certains cas, des requêtes HTTP synchrones peuvent s'avérer nécessaires ou préférables. Dans le récit suivant, nous approfondirons les algorithmes permettant de créer des requêtes HTTP synchrones à l'aide de JavaScript. Nous explorerons également deux approches différentes ainsi que leurs explications de code et applications pratiques correspondantes.

Algorithme

Pour effectuer une requête HTTP synchrone en JavaScript, un algorithme de base doit être exécuté qui comprend les étapes suivantes -

• Tout d'abord, un exemple de génération d'un objet requête HTTP.

• Deuxièmement, ajustez la demande en spécifiant la méthodologie, l'Uniform Resource Locator (URL) et en activant le mode de synchronisation des demandes.

• Troisièmement, envoyez une demande.

• Quatrièmement, attendez la réponse.

• Enfin, gérez la réponse en conséquence.

Méthode

Utilisation de XMLHttpRequest

XMLHttpRequest est un objet préexistant en JavaScript qui est utilisé depuis un certain temps. Bien qu’il ait été remplacé par des alternatives modernes, il exécute toujours très bien les requêtes HTTP synchrones. Voici les instructions sur la façon d'implémenter XMLHttpRequest -

function synchronousRequest(url) {
   const xhr = new XMLHttpRequest();
   xhr.open('GET', url, false);
   xhr.send(null);
   if (xhr.status === 200) {
      return xhr.responseText;
   } else {
      throw new Error('Request failed: ' + xhr.statusText);
   }
}

Dans cet exemple, nous créons d'abord une nouvelle instance XMLHttpRequest. Ensuite, nous appelons la méthode open() pour configurer la requête. Le premier paramètre est la méthode HTTP (GET), le deuxième paramètre est l'URL et le troisième paramètre est une valeur booléenne indiquant si la requête doit être asynchrone (faux pour les requêtes synchrones). Enfin, nous envoyons la requête en utilisant la méthode send() et attendons la réponse. Si le statut est 200 (OK), nous renvoyons le texte de la réponse ; sinon, nous renvoyons une erreur.

Exemple

Utilisez la fonction synchronousRequest définie précédemment -

try {
   const url = 'https://api.example.com/data';
   const responseData = synchronousRequest(url);
   console.log('Response data:', responseData);
} catch (error) {
   console.error('Error:', error.message);
}

Dans cet exemple, nous appelons la fonction synchronousRequest en utilisant l'URL du prototype. Si la demande aboutit, nous enregistrerons les informations de réponse sur la console. Cependant, en cas d'échec, nous enregistrons un message d'erreur sur la console.

Utilisez Get API

L'API Fetch est un remplacement moderne de XMLHttpRequest, conçu pour être plus flexible et plus facile à utiliser. Malheureusement, la fonction native fetch() ne prend pas en charge les requêtes synchrones. Cependant, vous pouvez utiliser async/await pour créer un comportement de type synchronisation -

async function synchronousFetch(url) {
   const response = await fetch(url);
   if (response.ok) {
      const data = await response.text();
      return data;
   } else {
      throw new Error('Request failed: ' + response.statusText);
   }
}

Dans cet exemple, nous utilisons la fonction fetch() pour fournir Promise. Nous utilisons le mot-clé wait pour suspendre l'exécution jusqu'à la fin de la promesse avant de continuer avec les lignes de code suivantes. Si la réponse est satisfaisante, on récupère le texte de la réponse ; sinon, on déclenche une erreur.

Exemple

Utilisez la fonction synchronousFetch définie précédemment -

import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
   const [responseData, setResponseData] = useState(null);
   useEffect(() => {
      (async () => {
         try {
            const url = "https://jsonplaceholder.typicode.com/todos/1";
            const response = await fetch(url);
            if (!response.ok) {
               throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const data = await response.json();
            setResponseData(data);
         } catch (error) {
            console.error("Error:", error.message);
         }
      })();
   }, []);
   return (
      <div className="App">
         <h1>API Data</h1>
         {responseData ? (
            <pre>{JSON.stringify(responseData, null, 2)}</pre>
         ) : (
            <p>Loading...</p>
         )}
      </div>
   );
}

Sortie

API Data
{
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
}

Dans cet exemple, nous appelons la fonction synchronousFetch dans la fonction asynchrone pour gérer correctement le mot-clé wait. Comme dans l'exemple précédent, nous enregistrons les données de réponse sur la console si la requête aboutit, sinon un message d'erreur est enregistré.

Conclusion

Si les requêtes asynchrones sont souvent privilégiées pour leur caractère non bloquant, les requêtes HTTP synchrones en JavaScript ont toujours leurs cas d'utilisation. Nous avons discuté des algorithmes permettant d'effectuer des requêtes HTTP synchrones et exploré deux approches différentes, notamment l'ancienne méthode XMLHttpRequest et l'API Fetch plus moderne avec async/await. Gardez à l’esprit que les requêtes synchrones doivent être utilisées avec prudence, car elles peuvent bloquer l’exécution du code JavaScript et avoir un impact négatif sur l’expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!