Async/Await в JavaScript: упрощение асинхронного кода

Async/await — это функция JavaScript, упрощающая асинхронное программирование. Мы дадим определение async/await, опишем, как он работает, и приведем несколько практических примеров в этой статье блога.

Понимание асинхронного программирования

Асинхронное программирование — это шаблон программирования, в котором задачи выполняются одновременно, а результаты возвращаются, как только они будут готовы. Традиционное синхронное программирование выполняет задачи последовательно, что может заставить пользователя ждать очень долго.
Javascript предлагает асинхронное программирование в основном тремя различными способами: обратные вызовы, обещания и async/await.
функции, которые выполняются после завершения задачи и передаются в качестве аргументов в другие функции. Обещания — это объекты, которые заменяют значения, которые могут быть недоступны сразу, но в конечном итоге будут выполнены. Async/await — это современный метод управления асинхронным программированием, который делает синтаксис кода более простым и читабельным.

Я рекомендую прочитать JavaScript Promise, прежде чем углубляться в Async/await, чтобы лучше понять основные концепции.

Что такое асинхронное/ожидание?

Программисты могут писать асинхронный код более синхронно, используя функцию синтаксиса JavaScript async/await. Он основан на Promise и предлагает более понятный и понятный подход к созданию асинхронных программ.

Когда функция помечена префиксом «async», это означает, что она всегда будет возвращать Promise. Ключевое слово «await» используется для остановки выполнения программы внутри асинхронной функции до тех пор, пока обещание не будет выполнено.

Как использовать Async/Await?

давайте посмотрим на пример, чтобы понять работу async/await. Рассмотрим случай, когда функция возвращает обещание, которое разрешается через некоторое время:

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

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

async function delayedFunction() {
  await wait(1000);
  console.log("Delayed function executed");
}

В этом коде мы пометили «delayedFunction» как асинхронную, используя ключевое слово «async». Мы также использовали ключевое слово «await», чтобы приостановить выполнение кода до тех пор, пока Promise, возвращаемый функцией «wait», не будет разрешен. Как только обещание будет разрешено, консоль зарегистрирует сообщение «Отложенная функция выполнена».

Обработка ошибок с помощью Async/Await

Обработка ошибок упрощается при использовании async/await, что является одним из его преимуществ. Мы можем использовать «try/catch» для более синхронной обработки ошибки. Например, у нас есть функция, которая возвращает промис, срок действия которого истекает через некоторое время:

function waitAndReject(ms) {
  return new Promise((resolve, reject) => setTimeout(() => reject("Error"), ms));
}

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

async function errorFunction() {
  try {
    await waitAndReject(1000);
  } catch (e) {
    console.log(e);
  }
}

В этом коде мы использовали оператор «try/catch» для обработки ошибки, вызванной промисом, возвращенным «waitAndReject». Если Promise отклонено, сообщение об ошибке «Ошибка» будет зарегистрировано на консоли.

Реальные примеры Async/Await

Давайте посмотрим, как использовать async/await с Fetch API для получения данных из стороннего API:

async function getJokes(category) {
  try {
    const response = await fetch(`https://api.chucknorris.io/jokes/random?category=${category}`);
    const data = await response.json();
    const joke = data.value;
    console.log(`Here's a joke about ${category}: ${joke}`);
  } catch (e) {
    console.log(`Error: ${e}`);
  }
}

В этом коде мы использовали async/await с Fetch API, чтобы сделать HTTP-запрос к API Chuck Norris Jokes и получить случайную шутку для данной категории. Мы также использовали try/catch для обработки любых ошибок, которые могут возникнуть во время запроса.

Chuck Norris Jokes API — это общедоступный API, который предоставляет случайные шутки о Чаке Норрисе в различных категориях, таких как «разработка», «наука», «кино» и т. д. В этом примере показано, как использовать async/await для извлечения данных из третьего -party API и используйте его в своем приложении.

Преимущества использования Async/Await

Использование async/await имеет несколько преимуществ по сравнению с традиционными методами асинхронного программирования. Во-первых, он упрощает синтаксис и делает код более читабельным, избегая вложенности и цепочки обратных вызовов. Во-вторых, он позволяет лучше обрабатывать ошибки, используя блоки try/catch для обработки исключений. Наконец, это повышает производительность веб-приложений, позволяя задачам выполняться одновременно и сокращая время ожидания для пользователя.

Лучшие практики использования Async/Await

Хотя async/await обеспечивает более простой и лаконичный способ написания асинхронного кода, следует помнить о некоторых рекомендациях. Вот несколько советов, которые помогут вам написать эффективный и поддерживаемый код async/await:

1. Всегда используйте блоки try/catch для обработки исключений и ошибок.
2. Используйте метод Promise.all() для одновременного выполнения нескольких асинхронных задач.
3. Используйте метод Promise.race() для выполнения нескольких асинхронных задач и возврата результата первой задачи, которая разрешается или отклоняется.
4. Избегайте использования await внутри циклов, так как это может заблокировать выполнение других задач.
5. Используйте сторонние библиотеки, такие как async или bluebird, для обработки сложных асинхронных задач.

В заключение, функциональность async/await JavaScript — это мощный инструмент, который позволяет программистам писать асинхронный код более синхронным образом. Это упрощает работу с Promise и упрощает обработку ошибок. Может потребоваться некоторое время, чтобы привыкнуть к синтаксису и понять, как работает async/await, если вы новичок. Но как только вы освоитесь, вы обнаружите, что писать асинхронный код JavaScript становится намного проще и приятнее.

Некоторые быстрые ссылки

Локальное хранилище | Кэширование Redis | Кластер Node.js | Методы массивов | Функция обратного звонка | "Обещать"

Свяжитесь со мной

ЛинкедИн | Гитхаб

Создавайте приложения с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

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

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:

→ Микро-интерфейсы

→ Система дизайна

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

→ Монорепо

Узнать больше: