Aký je prínos syntaxového cukru implementovaného…

Async/await robí asynchrónny kód čitateľnejším a zrozumiteľnejším, umožňuje ho písať v imperatívnom štýle blízkom synchronnému. To uľahčuje ladenie a pochopenie toku vykonávania.

Hlavné výhody v porovnaní s promise:

Čitateľnosť kódu: Asynchrónny kód vyzerá takmer ako synchronný, bez zjavného použitia .then() a .catch().
Spracovanie chýb: Spracovanie chýb pomocou try...catch je výrazne jednoduchšie a bežnejšie v porovnaní s reťazcami .catch() alebo odovzdávaním funkcií chýb v .then().
Ladenie: Tok vykonávania v asynchrónnych funkciách je lineárnejší, čo uľahčuje krokové ladenie v vývojárskych nástrojoch.
Čakanie na viacero asynchrónnych operácií: Uľahčuje čakanie na viac asynchrónnych operácií závislých od výsledkov iných.

Tu je príklad:

S použitím promise:

// Príklad s promise
function fetchDataPromise(url1, url2) {
  return fetch(url1)
    .then(response1 => {
      if (!response1.ok) throw new Error(`HTTP chyba! stav: ${response1.status}`);
      return response1.json();
    })
    .then(data1 => {
      console.log('Dáta z URL1:', data1);
      return fetch(url2);
    })
    .then(response2 => {
      if (!response2.ok) throw new Error(`HTTP chyba! stav: ${response2.status}`);
      return response2.json();
    })
    .then(data2 => {
      console.log('Dáta z URL2:', data2);
      return [data1, data2];
    })
    .catch(error => {
      console.error('Chyba pri načítaní dát:', error);
      throw error; // odovzdanie chyby ďalej
    });
}

fetchDataPromise('https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/users/1')
  .then(results => console.log('Konečné výsledky:', results))
  .catch(error => console.error('Operácia zlyhala:', error));

S použitím async/await:

// Príklad s async/await
async function fetchDataAsync(url1, url2) {
  try {
    const response1 = await fetch(url1);
    if (!response1.ok) throw new Error(`HTTP chyba! stav: ${response1.status}`);
    const data1 = await response1.json();
    console.log('Dáta z URL1:', data1);

    const response2 = await fetch(url2);
    if (!response2.ok) throw new Error(`HTTP chyba! stav: ${response2.status}`);
    const data2 = await response2.json();
    console.log('Dáta z URL2:', data2);

    return [data1, data2];
  } catch (error) {
    console.error('Chyba pri načítaní dát:', error);
    throw error; // odovzdanie chyby ďalej
  }
}

fetchDataAsync('https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/users/1')
  .then(results => console.log('Konečné výsledky:', results))
  .catch(error => console.error('Operácia zlyhala:', error));

Ako je vidieť z príkladov, verzia s async/await je kompaktnejšia a ľahšie pochopiteľná z hľadiska sekvencionality akcií a spracovania chýb.

Aký je prínos syntaxového cukru implementovaného pomocou async/await v porovnaní s promises?