Mida eelistate kasutada: async/await või send…

Ma eelistan kasutada async/await.

Eelised:

Lugemise lihtsus: Kood näeb välja nagu sünkroonne, mis oluliselt lihtsustab loogika mõistmist, eriti kui töötate mitme asünkroonse operatsiooniga.
Callback helli vältimine: Vältib sügavalt sisse ehitatud callback'e, mis võib muuta koodi raskesti loetavaks ja hooldatavaks.
Vigade mugav töötlemine: Võite kasutada standardseid try...catch plokke vigade töötlemiseks.
Parema kolmanda osapoole tööriistade tugi: async/await kasutamine asünkroonse koodi puhul on sageli mugavam silumiseks ja profiilimiseks.

send meetod (tõenäoliselt XMLHttpRequest või <form> objekti send) kasutatakse andmete saatmiseks, kuid see ise ei ole asünkroonsuse juhtimise mehhanism. send-i kasutades töötlemine toimub tavaliselt sündmuste (onload, onerror jne) kaudu, mis viib callback-põhise struktuurini.

async/await-iga töötamine API-de nagu fetch kasutamisel on loomulikum:

// Näide async/await-iga
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP viga: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Viga andmete saamisel:", error);
    throw error;
  }
}

// Kasutamine
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Saadud andmed:", data);
  })
  .catch(error => {
    console.error("Andmete töötlemise viga:", error);
  });

Võrdlus XMLHttpRequest-iga ja sündmuste töötlemisega:

// XMLHttpRequest ja sündmused näide
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true muudab päringu asünkroonseks

  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 viga: ${xhr.status}`), null);
    }
  };

  xhr.onerror = function() {
    callback(new Error("Võrguviga"), null); // võrguviga
  };

  xhr.send(); // saata päring
}

// Kasutamine
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Viga andmete saamisel:", error);
  } else {
    console.log("Saadud andmed:", data);
  }
});

Ilmne on, et async/await versioon on kompaktsem ja kergem lugeda.

Mida eelistate kasutada: async/await või send?