JavaScript Async

Старий синтаксис обробки промісів, який використовувався до появи async/await.

function myFunction() {
  return Promise.resolve('Hello');
}

myFunction().then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Нова версія передбачає використання лише одного колбеку для обробки результату, а помилки зазвичай обробляються через .catch(), що робить код більш чистим та зрозумілим:

function myFunction() {
  return Promise.resolve('Hello');
}

myFunction().then(function(value) {
  /* code if successful */
  }).catch(function(error) {
  /* code if some error */
});

async та await спрощують написання промісів. async робить функцію такою, що повертає Promise.

async function myFunction() {
  return 'Hello';
}

Це аналогічно:

function myFunction() {
  return Promise.resolve('Hello');
}

await змушує функцію чекати на Promise.

let value = await promise;

Basic Syntax

async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {resolve('Hello');}, 3000);
  });
  let data = await myPromise;
  console.log(data);
}

myDisplay();

ℹ️ Чому не можна просто Promise.resolve('Hello')? Promise.resolve('Hello') виконається миттєво, без затримки, тоді як у цьому прикладі використовується асинхронна затримка (setTimeout), тому потрібен new Promise(). ✅ Висновок: Коли потрібно затримати виконання або виконати асинхронний код перед resolve, потрібно використовувати new Promise().

🔹 Обробка помилок

Щоб уникнути падіння коду, використовують try...catch.

async function fetchData() {
try {
  let response = await fetch("https://wrong-url.com"); // Some error!
  let data = await response.json();
  console.log(data);
} catch (error) {
  console.error("Error:", error);
}
}

fetchData();

async and await make promises easier to write.