Que préférez-vous utiliser : async/await ou send…

Je préfère utiliser async/await.

Avantages :

Lisibilité : Le code ressemble à du code synchrone, ce qui facilite grandement la compréhension de la logique, surtout lorsqu'on travaille avec plusieurs opérations asynchrones.
Absence de callback hell : On évite l'imbrication de callbacks, qui peut rendre le code difficile à lire et à maintenir.
Gestion des erreurs pratique : On peut utiliser des blocs standard try...catch pour gérer les erreurs dans le code asynchrone.
Meilleur support pour les outils tiers : Le débogage et le profilage du code asynchrone avec async/await sont souvent plus confortables.

La méthode send (probablement la méthode send de l'objet XMLHttpRequest ou <form>) est utilisée pour envoyer des données, mais elle n'est pas en soi un mécanisme pour gérer l'asynchronie. Le résultat de la requête utilisant send est généralement traité via des événements (onload, onerror, etc.), ce qui conduit à une structure de code orientée callbacks.

Avec async/await, l'interaction avec des API asynchrones comme fetch devient plus naturelle.

// Exemple avec async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Erreur HTTP : ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Erreur lors de la récupération des données :", error);
    throw error; // Propagation de l'erreur pour un traitement supérieur
  }
}

// Utilisation de la fonction asynchrone
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Données reçues :", data);
  })
  .catch(error => {
    console.error("Erreur lors du traitement des données :", error);
  });

Comparaison avec XMLHttpRequest et gestion via événements :

// Exemple avec XMLHttpRequest et événements (similaire à l'utilisation de send)
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true rend la requête asynchrone

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data); // Passage des données au callback
      } catch (error) {
        callback(error, null); // Erreur de parsing JSON
      }
    } else {
      callback(new Error(`Erreur HTTP : ${xhr.status}`), null); // Erreur HTTP
    }
  };

  xhr.onerror = function() {
    callback(new Error("Erreur réseau"), null); // Erreur réseau
  };

  xhr.send(); // Envoi de la requête
}

// Utilisation avec callback
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Erreur lors de la récupération des données :", error);
  } else {
    console.log("Données reçues :", data);
  }
});

Il est évident que la version avec async/await est plus compacte et plus facile à lire.

Que préférez-vous utiliser : async/await ou send ?