Ką labiau norite naudoti: async/await ar send…

Aš pageidau naudoti async/await.

Privalumai:

Skaitomumas: Kodėl atrodo kaip sinchroninis, tai žymiai palengvina logikos supratimą, ypač dirbant su keliais asinchroniniais veiksmais.
Callback hell išvengimas: Vengia įdėtus callback'us, kurie gali padaryti kodą sunkiai skaitomą ir prižiūrimą.
Patogus klaidų tvarkymas: Galima naudoti standartinius try...catch blokus klaidų apdorojimui.
Geresnė trečiųjų šalių įrankių palaikymas: async/await naudojant asinchroninį kodą dažnai yra patogiau derinti ir analizuoti.

send metodas (greičiausiai XMLHttpRequest arba <form> objekto send) naudojamas duomenų siuntimui, tačiau pats savaime nėra mechanizmas asinchroniškumo valdymui. Užklausos rezultatas dažniausiai apdorojamas per įvykius (onload, onerror ir t.t.), kas sukuria callback orientuotą struktūrą.

Naudojant async/await sąveika su asinchroniniais API, tokiais kaip fetch, tampa natūralesnė:

// Pavyzdys su async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP klaida: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Klaida gaunant duomenis:", error);
    throw error;
  }
}

// Naudojimas
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Gauti duomenys:", data);
  })
  .catch(error => {
    console.error("Duomenų apdorojimo klaida:", error);
  });

Palyginimas su XMLHttpRequest ir įvykių apdorojimu:

// Pavyzdys su XMLHttpRequest ir įvykiais
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true daro užklausą asinchroninę

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data);
      } catch (error) {
        callback(error, null);
      }
    } else {
      callback(new Error(`HTTP klaida: ${xhr.status}`), null);
    }
  };

  xhr.onerror = function() {
    callback(new Error("Tinklo klaida"), null); // tinklo klaida
  };

  xhr.send(); // siųsti užklausą
}

// Naudojimas
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Klaida gaunant duomenis:", error);
  } else {
    console.log("Gauti duomenys:", data);
  }
});

Akivaizdu, kad async/await versija yra trumpesnė ir lengviau skaitoma.

Ką labiau norite naudoti: async/await ar send?