Différentes façons de faire des requêtes HTTP en JavaScript

Cet article explore diverses méthodes JavaScript pour effectuer des requêtes HTTP, en s'appuyant sur les connaissances fondamentales acquises grâce à la documentation et aux didacticiels. Nous examinerons plusieurs approches pratiques.

1. API Fetch : Une méthode JavaScript moderne et intégrée remplaçant l'ancienne XMLHttpRequest. Il offre une interface plus propre, basée sur Promise, pour les requêtes HTTP. La fonction principale, fetch(), récupère les ressources (comme les données du serveur).

   <code class="language-javascript">fetch (URL, options)</code>

   Par défaut, fetch() utilise GET. Il renvoie une promesse résolue en un Response objet.

   Exemple (adapté de MDN) :

   <code class="language-javascript">async function getData() {
     const url = "https://example.org/products.json";
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error(`Response status: ${response.status}`);
       }
       const json = await response.json();
       console.log(json);
     } catch (error) {
       console.error(error.message);
     }
   }</code>

   Requêtes POST : Pour les requêtes POST, spécifiez method, headers et body dans l'objet options.

   Exemple (adapté de MDN) :

   <code class="language-javascript">const response = await fetch("https://example.org/post", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ username: "example" }),
   });</code>

   Fonctionnalités clés de l'API Fetch : L'API Fetch prend intrinsèquement en charge CORS (Cross-Origin Resource Sharing) et offre un contrôle précis sur les informations d'identification (cookies, données d'authentification).

2. Axios : Une bibliothèque tierce populaire et conviviale simplifiant les requêtes HTTP par rapport à l'API Fetch. C'est isomorphe (fonctionne à la fois dans Node.js et dans les navigateurs).

   Exemple POST (modifié pour la fonction flèche) :

   <code class="language-javascript">const axios = require('axios');
   
   axios.get('/user?ID=12345')
     .then(response => console.log(response))
     .catch(error => console.log(error))
     .finally(() => {});</code>

3. jQuery.ajax : Fait partie de la bibliothèque jQuery, souvent trouvée dans les projets existants.

   <code class="language-javascript">$.ajax({
     url: 'https://api.example.com/data',
     method: 'GET',
     success: function(data) { console.log(data); },
     error: function(error) { console.error('Error:', error); }
   });</code>

4. API WebSocket : Une API JavaScript intégrée pour établir des canaux de communication persistants et bidirectionnels entre le client et le serveur. Idéal pour les applications en temps réel (par exemple, le chat).

   Exemple (adapté de MDN) :

   <code class="language-javascript">const socket = new WebSocket("ws://localhost:8080");
   socket.addEventListener("open", (event) => { socket.send("Hello Server!"); });
   socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });</code>

Bien que la syntaxe des requêtes HTTP varie selon les langages et les frameworks (PHP, Next.js, etc.), la compréhension de ces méthodes JavaScript de base constitue une base solide pour s'adapter à différents contextes.

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!