Kaip dirbate su asinchroniniu JavaScript?

Aš dirbu su asinchroniškumu JavaScript naudodamas callback'us, pažadus ir async/await.

Callback'ai yra funkcijos, kurios perduodamos kitoms funkcijoms kaip argumentai ir vykdomos po tam tikros operacijos pabaigos. Jie gali sukelti "velniškus callback'us" gilinantis.

// Callback pavyzdys
function fetchData(callback) {
  setTimeout(() => {
    callback("Duomenys gauti");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Išves "Duomenys gauti" po 1 sekundės
});

Pažadai yra objektai, kurie atstovauja galutinį asinchroninės operacijos užbaigimą arba nesėkmę. Jie palengvina darbą su asinchroniniu kodu, leidžia išvengti gilios įdėjimo. Jie turi tris būsenas: pending (laukiama), fulfilled (sėkmingai įvykdyta), rejected (atmesta).

// Pažado pavyzdys
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Duomenys gauti");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Išves "Duomenys gauti" po 1 sekundės
  })
  .catch((error) => {
    console.error("Klaida:", error);
  });

Async/await yra sintaksinis cukrus virš pažadų, kuris daro asinchroninį kodą skaitomesnį, panašų į sinchroninį. Funkcija, pažymėta async, visada grąžina pažadą. Operatorius await gali būti naudojamas tik async funkcijos viduje ir sustabdo vykdymą iki pažadas bus įvykdytas arba atmestas.

// Async/await pavyzdys
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Duomenys gauti");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Išves "Duomenys gauti" po 1 sekundės
  } catch (error) {
    console.error("Klaida:", error);
  }
}

processData();

Dažnai naudoju async/await dirbdamas su API užklausomis, nes tai patogiausias ir skaitomiausias būdas tvarkyti asinchronines operacijas. Jei reikia vykdyti kelias asinchronines operacijas lygiagrečiai, naudoju Promise.all() arba Promise.allSettled().

Naudoju event loop, kad suprasčiau asinchroninio kodo vykdymo tvarką, mikro užduotis ir makro užduotis.