Асинхронное программирование на 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 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.