Co wolisz używać: async/await czy send?

Preferuję używanie async/await.

Zalety:

• Czytelność: Kod wygląda jak synchroniczny, co znacznie upraszcza zrozumienie logiki, szczególnie przy pracy z wieloma operacjami asynchronicznymi.
• Brak callback hell: Unika się zagnieżdżania callbacków, co może utrudniać czytanie i utrzymanie kodu.
• Wygodne obsługiwanie błędów: Można używać standardowych bloków try...catch do obsługi błędów w kodzie asynchronicznym.
• Lepsze wsparcie dla narzędzi zewnętrznych: Debugowanie i profilowanie kodu asynchronicznego z async/await jest często bardziej komfortowe.

Metoda send (prawdopodobnie odnosząca się do metody send obiektu XMLHttpRequest lub <form>) służy do wysyłania danych, ale sama w sobie nie jest mechanizmem do zarządzania asynchronicznością. Wynik zapytania z użyciem send jest zwykle obsługiwany przez zdarzenia (onload, onerror itp.), co prowadzi do struktury kodu opartej na callbackach.

Z async/await interakcja z asynchronicznymi API, takimi jak fetch, staje się bardziej naturalna.

// Przykład z async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Błąd HTTP: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Błąd podczas pobierania danych:", error);
    throw error; // Propagujemy błąd
  }
}

// Użycie funkcji asynchronicznej
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Odebrane dane:", data);
  })
  .catch(error => {
    console.error("Błąd podczas przetwarzania danych:", error);
  });

Porównanie z XMLHttpRequest i obsługą zdarzeń:

// Przykład z XMLHttpRequest i zdarzeniami (podobnie jak przy użyciu send)
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true czyni żądanie asynchronicznym

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data); // Przekazujemy dane do callbacka
      } catch (error) {
        callback(error, null); // Błąd parsowania JSON
      }
    } else {
      callback(new Error(`Błąd HTTP: ${xhr.status}`), null); // Błąd HTTP
    }
  };

  xhr.onerror = function() {
    callback(new Error("Błąd sieci"), null); // Błąd sieci
  };

  xhr.send(); // Wysyłanie żądania
}

// Użycie z callback
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Błąd podczas pobierania danych:", error);
  } else {
    console.log("Odebrane dane:", data);
  }
});

Oczywiście wersja z async/await jest bardziej zwarta i czytelna.