Modernais JavaScript bieži izmanto asinhronas operācijas — darbības, kas nenotiek uzreiz (piemēram, datu ielāde no servera). async/await un fetch ir mūsdienu rīki šo operāciju pārvaldīšanai.

Sinhrons vs asinhronis kods

// Sinhrons — katrs solis gaida iepriekšējo
console.log('1. Pirmais');
console.log('2. Otrais');
console.log('3. Trešais');

// Asinhronis — setTimeout neaiztur pārējo kodu
console.log('1. Sākums');
setTimeout(() => console.log('2. Pēc 2 sekundēm'), 2000);
console.log('3. Beigas');
// Izvadīs: 1, 3, 2 (pēc 2 sek.)

Promise (solījums)

Promise ir objekts, kas pārstāv asinhronu operāciju — tā var tikt izpildīta veiksmīgi vai nē:

const solījums = new Promise((resolve, reject) => {
const veiksme = true;
if (veiksme) {
resolve('Izdevās!');
} else {
reject('Kļūda!');
}
});

solījums
.then(rezultats => console.log(rezultats))
.catch(kļūda => console.log(kļūda));

Fetch API — datu ielāde

fetch() ļauj ielādēt datus no servera (API):

fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(dati => {
dati.forEach(lietotajs => {
console.log(lietotajs.name);
});
})
.catch(kļūda => console.error('Kļūda:', kļūda));

async/await

Modernāks un lasāmāks veids, kā strādāt ar asinhronām operācijām:

async function ielādētLietotājus() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const dati = await response.json();

dati.forEach(lietotajs => {
console.log(lietotajs.name);
});
} catch (kļūda) {
console.error('Kļūda:', kļūda);
}
}

ielādētLietotājus();

Praktisks piemērs: datu ielāde un attēlošana

async function parādītIerakstus() {
const konteiners = document.querySelector('#ieraksti');
konteiners.innerHTML = '<p>Ielādē...</p>';

try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
const ieraksti = await response.json();

konteiners.innerHTML = ieraksti
.map(i => `
<div class="ieraksts">
<h3>${i.title}</h3>
<p>${i.body}</p>
</div>
`).join('');
} catch (kļūda) {
konteiners.innerHTML = '<p>Kļūda ielādējot datus.</p>';
}
}

parādītIerakstus();

Datu nosūtīšana (POST)

async function nosūtītDatus(dati) {
const response = await fetch('/api/lietotaji', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(dati),
});
const rezultats = await response.json();
return rezultats;
}