Асинхронный JavaScript стал проще

Поймите, что означает асинхронный код.

Фото автора Pankj Patel на Unsplash

Во время знакомства с JavaScript вы, возможно, слышали несколько терминов. Я могу гарантировать вам, что одним из тех, что вы слышали больше всего, был асинхронный JavaScript, но что это такое и как он помогает в веб-разработке?

Что такое асинхронный JavaScript?

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

Существует несколько способов написания асинхронного кода JavaScript, включая использование ключевых слов async и await, а также использование промисов. Например, вы можете использовать функцию setTimeout для выполнения функции обратного вызова по истечении указанного времени:

setTimeout(() => {
  console.log('Hi, how are you?');
}, 3000);

const add = (a, b) => {
  return a + b;
}

В этом примере console.log будет выполнено через 3000 миллисекунд (3 секунды). Это позволяет другому коду тем временем продолжать работу, а не блокироваться функцией setTimeout. Если вы запустите его, вы увидите, что добавление печатается первым, что означает, что оно выполняется во время выполнения другой функции.

Асинхронный JavaScript часто используется в ситуациях, когда данные необходимо загружать или извлекать из внешнего источника, такого как сервер или база данных. Используя асинхронные методы, программа может продолжать работать, пока данные извлекаются, а не блокироваться до тех пор, пока данные не будут доступны. Это может помочь улучшить производительность и скорость отклика программы.

Это особенно важно в JavaScript, где работа в Интернете должна быть плавной. Если код был заблокирован во время вызова API, веб-сайт может зависнуть, и пользователь будет ждать завершения вызова, чтобы выполнить определенное действие.

Как выполнить асинхронный код

Один из способов выполнения асинхронного кода в JavaScript — это промисы, которые представляют собой объект, который позволяет вам писать асинхронный код, выглядя при этом синхронным. Обещания имеют три состояния: ожидание, выполнено и отклонено. Как вы можете себе представить, если я сделаю запрос к API, я получу состояние выполнения, если запрос был успешным, отклонение, если это не так, и ожидание, пока он обрабатывается.

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

const promise = new Promise((resolve, reject) => {
  resolve(add(2, 1));
});

promise.then(
  value => console.log(value), // Promise is fulfilled
  error => console.error(error) // Promise is rejected
);

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

Методы then и catch

Промисы очень полезны, потому что они легко читаются благодаря методам then и catch. Метод then позволяет вам связывать промисы вместе, и все, что происходит в одном промисе, будет использоваться для последующего промиса.

Наконец, метод catch позволяет обрабатывать любые ошибки, которые могут возникнуть во время асинхронной операции. Это происходит, когда обещание отвергается.

Истинную силу промиса можно увидеть, когда вы получаете API:

const url = 'https://wwww.example.com';

formatUrl(url)
.then((formattedUrl) =>
  fetch(formattedUrl)
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
    }),
)
.catch((error) => {
  // Do something
});

В этом коде функция formatUrl заставит URL-адрес соответствовать формату, требуемому моим примером API. После этого он извлечет данные, проанализирует их в формате JSON и, наконец, выведет на консоль. При этом не блокируя другой код, будучи читаемым и имея сегмент, который перехватывает ошибки, оператор catch. Посмотрите, как читабельно и плавно это выглядит.

На этом мы завершаем введение в асинхронный JavaScript. Надеюсь, вам понравилось, и подпишитесь, чтобы получать больше качественного контента.

Дополнительные ресурсы по теме:

Промисы JavaScript с w3schools:https://www.w3schools.com/js/js_promise.asp

Учебник MDN по промисам: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Руководство по упрощенным обещаниям для веб-разработчиков: https://www.youtube.com/watch?v=DHvZLI7Db8E&t=488s