Асинхронность и неблокирующие вызовы. Промисы

Что такое асинхронность

Асинхронность — это возможность выполнять несколько операций параллельно, не блокируя основной поток выполнения программы. В JavaScript код исполняется в одном потоке, поэтому без асинхронности любая длительная операция (например, запрос к серверу) могла бы «заморозить» интерфейс до её завершения.

Чтобы этого избежать, используются неблокирующие вызовы, которые позволяют запустить операцию в фоновом режиме и продолжить выполнение кода дальше.

Неблокирующие вызовы

Неблокирующий вызов — это такой вызов функции, который не останавливает выполнение программы, пока он выполняется. Вместо этого программа регистрирует обработчик результата, который будет вызван позже.

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

Промисы

Промис — это специальный объект, который представляет результат асинхронной операции. Он может находиться в одном из трёх состояний:

pending — ожидание (операция ещё выполняется);
fulfilled — успешно завершено (результат получен);
rejected — завершено с ошибкой.

      // Создание промиса
      const promise = new Promise((resolve, reject) => {
          const success = true;
          if (success) {
              resolve("Операция прошла успешно");
          } else {
              reject("Произошла ошибка");
          }
      });

      // Использование промиса
      promise
              .then(result => {
                  console.log(result); // "Операция прошла успешно"
              })
              .catch(error => {
                  console.log(error); // "Произошла ошибка"
              });
    

Цепочки промисов

Одним из главных преимуществ промисов является возможность выстраивать цепочки асинхронных вызовов.

      fetch("https://api.example.com/data")
              .then(response => response.json())
              .then(data => {
                  console.log("Полученные данные:", data);
              })
              .catch(error => {
                  console.log("Ошибка запроса:", error);
              });
    

Async/Await

Async/Await — это синтаксический сахар над промисами, который позволяет писать асинхронный код так, будто он синхронный. Ключевое слово async объявляет функцию асинхронной, а оператор await приостанавливает её выполнение, пока промис не завершится.

      async function getData() {
          try {
              const response = await fetch("https://api.example.com/data");
              const data = await response.json();
              console.log("Полученные данные:", data);
          } catch (error) {
              console.log("Ошибка запроса:", error);
          }
      }

      getData();
    

Fetch API

Fetch API — это встроенный инструмент JavaScript для выполнения HTTP-запросов (о них поговорим отдельно). Он возвращает промис, который разрешается объектом Response.

      // Простой GET-запрос
      fetch("https://petstore.swagger.io/v2/store/inventory")
              .then(response => {
                  if (!response.ok) {
                      throw new Error("Ошибка сети: " + response.status);
                  }
                  return response.json();
              })
              .then(data => {
                  console.log("Данные:", data);
              })
              .catch(error => {
                  console.error("Произошла ошибка:", error);
              });
    

      // POST-запрос с телом
      fetch("https://petstore.swagger.io/v2/store/inventory", {
          method: "GET",
          headers: {
              "Content-Type": "application/json"
          }
      })
              .then(response => response.json())
              .then(result => {
                  console.log("Сервер ответил:", result);
              });
    

Лучшие практики

Всегда добавляйте .catch или используйте try...catch с async/await для обработки ошибок.
Используйте async/await для более чистого и читаемого кода.
При работе с несколькими асинхронными задачами изучите Promise.all и Promise.race.
В запросах через fetch всегда проверяйте response.ok и обрабатывайте ошибки HTTP.