Автор: Доктор. Дениз Госнелл

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

После моего первого знакомства с JavaScript около шести месяцев назад я хотел глубже понять встроенные концепции асинхронного программирования в языке JavaScript: async, await и promises. Чтобы научить себя этим концепциям, я придумал близкий к реальному, проверяемый вопрос для этого живого приложения:

Сколько времени займет получение данных с веб-страницы через REST API?

Есть много-много способов сделать это. Это сообщение (настоящее работающее приложение) посвящено синхронизации вызовов API туда и обратно между двумя разными облачными службами:

  1. Хостинг веб-приложений и сеть доставки контента (CDN): Netlify
  2. Облачная база данных: DataStax Astra DB

В оставшейся части этого поста подробно рассказывается, как я настраивал временные тесты с помощью асинхронных вызовов API, а также о нескольких сбоях, с которыми я столкнулся в процессе. Перейдите сюда для получения 10-минутного руководства о том, как настроить функции Netlify для выполнения вызовов API к базе данных Astra.

Как настроить асинхронные временные тесты?

Давайте настроим 10 тестов. Каждый тест будет делать 10 асинхронных (параллельно или одновременных) обращений к нашей базе данных в Astra DB. Наша цель — рассчитать время прохождения каждого набора асинхронных вызовов API из простого веб-приложения в нашу облачную базу данных и обратно. Псевдокод для этого будет выглядеть так:

Приведенный выше псевдокод преобразуется в следующий JavaScript:

Работа по выполнению асинхронных вызовов API находится в функции timeTest; мы доберемся до того, что это делает, после того, как мы рассмотрим мою первую ошибку.

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

Проводить плохие тесты в реальном времени

Что не так с этими результатами?

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

Что-то здесь не так. Похоже, что число round и startTime не обновляются с каждой последующей серией тестов. Вместо этого мы хотим, чтобы и число round, и число startTime дождались завершения тестов перед изменением значения.

Здесь мы сталкиваемся с async и await шаблонами в JavaScript.

Что такое шаблон async/await и как его здесь использовать?

Думайте о async и await как о синхронном чтении кода (как в Python), хотя на самом деле это не так. Этот отличный блог Mozilla подробно описывает определения и использование шаблона async/await. Определение await:

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

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

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

Проводить хорошие тесты в реальном времени

Здорово! Этот набор тестов теперь правильно определяет время только одного раунда вызовов API за раз. Наконец, давайте посмотрим, как мы делаем вызовы API.

Как запустить кучу асинхронных вызовов API?

Мне нравится, как легко использовать функцию Netlify функции. Для этого проекта я создал один REST API для совершения обращений из Netlify к базе данных в Астре. В пакете синхронизации вызов API выполняется в одной функции async, которая ожидает возврата полезной нагрузки. Вы можете увидеть тот же шаблон async/await в функции ниже, чтобы сделать вызов API и дождаться результата:

Последним шагом в нашей настройке является выполнение одновременных вызовов этого API. Для этого нам нужна последняя функция async:

Я выделил два раздела жирным шрифтом в приведенном выше фрагменте кода. Во-первых, давайте посмотрим на Promise.all(). Это последняя часть ключевой функциональности для нашего тестирования. Использование Promise.all() здесь будет ожидать возврата всех асинхронных вызовов API, прежде чем возвращать результаты.

Вы можете найти весь код для этого проекта здесь.

Подпишитесь на Технический блог DataStax, чтобы узнать больше историй разработчиков. Посетите наш канал YouTube для учебных пособий и здесь для разработчиков DataStax в Twitter, чтобы узнать последние новости о нашем сообществе разработчиков.

Ресурсы

  1. JavaScript
  2. Нетлифай
  3. ДатаСтакс Астра БД
  4. Репозиторий Github: список дел, пример приложения JAMStack с ReactJS + DataStax Astra DB
  5. Облегчение асинхронного программирования с помощью async и await
  6. Функции Netlify
  7. Репозиторий Github: создание REST API для совершения вызовов из Netlify в Astra DB
  8. Репозиторий Github: Тестирование скорости API для Astra DB в различных сценариях