Čo radšej používate: async/await alebo send?

Preferujem používať async/await.

Výhody:

• Čitateľnosť: Kód vyzerá ako synchronný, čo značne uľahčuje pochopenie logiky, najmä pri práci s viacerými asynchrónnymi operáciami.
• Absencia callback hell: Vyhýba sa vnoreniu callbackov, ktoré môžu spraviť kód ťažko čitateľným a udržiavateľným.
• Pohodlné spracovanie chýb: Môže sa použiť štandardný blok try...catch na spracovanie chýb v asynchrónnom kóde.
• Lepšia podpora externých nástrojov: Debugging a profilovanie asynchrónneho kódu s async/await je často pohodlnejšie.

Metóda send (pravdepodobne ide o metódu send objektu XMLHttpRequest alebo <form>) slúži na odoslanie dát, ale sama o sebe nie je mechanizmom na riadenie asynchrónnosti. Výsledok požiadavky s použitím send sa zvyčajne spracováva cez udalosti (onload, onerror atď.), čo vedie k callback-orientovanej štruktúre kódu.

S async/await je interakcia s asynchrónnymi API, ako je fetch, prirodzenejšia.

// Príklad s async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP chyba: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Chyba pri získavaní dát:", error);
    throw error; // Prehadzujeme chybu vyššie
  }
}

// Použitie asynchronej funkcie
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Získané dáta:", data);
  })
  .catch(error => {
    console.error("Chyba pri spracovaní dát:", error);
  });

Porovnanie s XMLHttpRequest a spracovaním cez udalosti:

// Príklad s XMLHttpRequest a udalosťami (analógne k použitiu send)
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true robí požiadavku asynchrónnou

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data); // odovzdanie dát do callbacku
      } catch (error) {
        callback(error, null); // odovzdanie chyby parsovania JSON
      }
    } else {
      callback(new Error(`HTTP chyba: ${xhr.status}`), null); // odovzdanie HTTP chyby
    }
  };

  xhr.onerror = function() {
    callback(new Error("Sieťová chyba"), null); // odovzdanie siete chyby
  };

  xhr.send(); // odoslanie požiadavky
}

// Použitie callback funkcie
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Chyba pri získavaní dát:", error);
  } else {
    console.log("Získané dáta:", data);
  }
});

Je zrejmé, že verzia s async/await je kompaktnejšia a ľahšie čitateľná.