Async/Await и Fetch: работа с сервером на JavaScript

JavaScript предоставляет async/await для упрощения работы с асинхронным кодом. Этот подход демонстрируется на примере взаимодействия с сервером через fetch.

Функция с Promise: имитация задержки

Функция delay имитирует задержку, возвращая Promise, который разрешается через указанное время:

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

Пример использования:

delay(2000).then(() => console.log('Two seconds'));

Выведет ‘Two seconds’ в консоль через две секунды.

Асинхронный запрос к серверу с использованием Fetch

Функция fetchTodos выполняет асинхронный запрос к https://jsonplaceholder.typicode.com/todos с искусственной задержкой:

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

const fetchTodos = async () => {
  console.log('Fetch todos started');
  await delay(2000);
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
};

fetchTodos();

После запуска, через две секунды в консоль выведется массив данных.

Упрощенный вариант:

const fetchTodosShort = async () => {
  console.log('Fetch todos started');
  await delay(2000);
  const data = await fetch(url).then(response => response.json());
  console.log(data);
};

Обработка ошибок

Блок try…catch обрабатывает потенциальные ошибки во время запроса:

const fetchTodosWithCatch = async () => {
  console.log('Fetch todos started');
  try {
    await delay(2000);
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

Сравнение с использованием только Promise

Пример реализации без async/await:

const fetchTodosPromises = () => {
  console.log('Fetch todos started');
  delay(2000)
    .then(() => fetch(url))
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
};

Async/await делает код более читаемым.

Как работает Async/Await

async/await — синтаксический сахар для работы с Promise. Функция, объявленная с async, возвращает Promise. await приостанавливает выполнение до разрешения Promise.

Async/await упрощает написание и чтение асинхронного кода в JavaScript, особенно в сочетании с fetch для работы с серверными данными.