Sobes.tech
Middle

Co raději používáte: async/await nebo send?

sobes.tech AI

Odpověď od AI

Preferuji používat async/await.

Výhody:

  • Čitelnost: Kód vypadá jako synchronní, což výrazně usnadňuje pochopení logiky, zejména při práci s více asynchronními operacemi.
  • Absence callback hell: Vyhýbá se vnořeným callbackům, které mohou učinit kód těžko čitelným a udržovatelným.
  • Pohodlné zpracování chyb: Lze použít standardní bloky try...catch pro zpracování chyb v asynchronním kódu.
  • Lepší podpora třetích stran: Debugging a profilování asynchronního kódu s async/await je často pohodlnější.

Metoda send (pravděpodobně se jedná o metodu send objektu XMLHttpRequest nebo <form>) slouží k odeslání dat, ale sama o sobě není mechanismem pro řízení asynchronnosti. Výsledek požadavku s použitím send je obvykle zpracováván přes události (onload, onerror atd.), což vede k callback-oriented struktuře kódu.

S async/await je práce s asynchronními API, jako je fetch, přirozenější.

// Pří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 při získávání dat:", error);
    throw error; // Přenášíme chybu výše
  }
}

// Použití asynchronní funkce
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Získaná data:", data);
  })
  .catch(error => {
    console.error("Chyba při zpracování dat:", error);
  });

Porovnání s XMLHttpRequest a zpracováním přes události:

// Příklad s XMLHttpRequest a událostmi (analogicky k použití send)
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true dělá požadavek asynchronní

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data); // předává data do callbacku
      } catch (error) {
        callback(error, null); // předává chybu parsování JSON
      }
    } else {
      callback(new Error(`HTTP chyba: ${xhr.status}`), null); // předává HTTP chybu
    }
  };

  xhr.onerror = function() {
    callback(new Error("Chyba sítě"), null); // předává síťovou chybu
  };

  xhr.send(); // odeslání požadavku
}

// Použití callback funkce
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Chyba při získávání dat:", error);
  } else {
    console.log("Získaná data:", data);
  }
});

Je zřejmé, že verze s async/await je kompaktnější a snadno čitelná.