Асинхронне програмування на JavaScript: використання Promises, async/await та обробка помилок

Асинхронне програмування є ключовим аспектом в сучасному JavaScript, яке дозволяє писати ефективний, неблокуючий код для роботи з асинхронними операціями, такими як HTTP-запити, взаємодія з базами даних чи файловими системами. У цій статті ми розглянемо основні поняття асинхронного програмування на JavaScript, зокрема Promises, async/await та обробку помилок.

Асинхронне програмування і Promises

Що таке Promises?

Promises є однією з основних конструкцій асинхронного програмування в JavaScript. Вони дозволяють представляти результат асинхронної операції як об’єкт, який можна обробити в майбутньому.

const promise = new Promise((resolve, reject) => {
  // асинхронна операція
});

Обробка результату

Для обробки результату Promise використовуються методи .then() та .catch().

promise
  .then((result) => {
    console.log('Успішно:', result);
  })
  .catch((error) => {
    console.error('Помилка:', error);
  });

Використання async/await

Async/await – це синтаксичний цукор, що спрощує роботу з Promises. Щоб використати async/await, потрібно оголосити функцію з ключовим словом async та використати await перед Promise.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

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

Обробка помилок з Promises

Для обробки помилок в Promises використовується метод .catch().

promise
  .then((result) => {
    console.log('Успішно:', result);
  })
  .catch((error) => {
    console.error('Помилка:', error);
  });

Обробка помилок з async/await

Для обробки помилок з async/await використовується блок try-catch.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log('Data:', data);
} catch (error) {
console.error('Error:', error);
}
}

fetchData();

Ланцюжки Promises

Послідовна обробка

Promises дозволяють створювати послідовні ланцюжки, використовуючи метод .then().

fetchData()
  .then((data) => processData(data))
  .then((result) => displayResult(result))
  .catch((error) => console.error('Error:', error));

Паралельна обробка

Для паралельної обробки Promises можна використати метод Promise.all().

Promise.all([fetchData1(), fetchData2()])
  .then(([result1, result2]) => console.log('Results:', result1, result2))
  .catch((error) => console.error('Error:', error));

Як працює async/await з циклами

Послідовне виконання

Для послідовного виконання async/await з циклами можна використати for або for...of.

async function fetchAllData(urls) {
  const results = [];
  for (const url of urls) {
    const data = await fetchData(url);
    results.push(data);
  }
  return results;
}

Паралельне виконання

Для паралельного виконання async/await з циклами можна використати Promise.all().

async function fetchAllData(urls) {
  const promises = urls.map((url) => fetchData(url));
  const results = await Promise.all(promises);
  return results;
}

Додаткові приклади використання Promises та async/await

Завантаження даних з API

Приклад використання Promises для завантаження даних з API

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error(`Error: ${response.status}`);
        }
      })
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}

const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

fetchData(apiUrl)
  .then((data) => console.log('Data:', data))
  .catch((error) => console.error('Error:', error));

Приклад використання async/await для завантаження даних з API:

async function fetchData(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
}

const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

fetchData(apiUrl)
  .then((data) => console.log('Data:', data))
  .catch((error) => console.error('Error:', error));

Як зробити послідовний запит за допомогою Promises та async/await

Приклад послідовного виконання запитів до API за допомогою Promises.

const apiUrl1 = 'https://jsonplaceholder.typicode.com/todos/1';
const apiUrl2 = 'https://jsonplaceholder.typicode.com/todos/2';

fetchData(apiUrl1)
  .then((data1) => {
    console.log('Data1:', data1);
    return fetchData(apiUrl2);
  })
  .then((data2) => console.log('Data2:', data2))
  .catch((error) => console.error('Error:', error));

Приклад послідовного виконання запитів до API за допомогою async/await.

async function fetchAllData() {
  try {
    const data1 = await fetchData(apiUrl1);
    console.log('Data1:', data1);

    const data2 = await fetchData(apiUrl2);
    console.log('Data2:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchAllData();

Як зробити паралельні запити до API за допомогою Promises та async/await

Приклад паралельного виконання запитів до API за допомогою Promises.

Promise.all([fetchData(apiUrl1), fetchData(apiUrl2)])
  .then(([data1, data2]) => {
    console.log('Data1:', data1);
    console.log('Data2:', data2);
  })
  .catch((error) => console.error('Error:', error));

Приклад паралельного виконання запитів до API за допомогою async/await та Promise.all.

async function fetchAllDataParallel() {
  try {
    const [data1, data2] = await Promise.all([
      fetchData(apiUrl1),
      fetchData(apiUrl2),
    ]);

    console.log('Data1:', data1);
    console.log('Data2:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchAllDataParallel();

Висновок

Асинхронне програмування на JavaScript з Promises, async/await та обробкою помилок дозволяє писати чистий, ефективний код для роботи з асинхронними операціями. Знання цих концепцій є важливим для успішної роботи з сучасними JavaScript-проектами.