В части 5 мы рассмотрели, как движок Chrome V8 выполняет код. Мы использовали инструменты отладки Chrome для отслеживания порядка выполнения JavaScript. Инструменты отладки — это исключительно мощные способы анализа асинхронного кода, которые сделают вашу работу более продуктивной. В этой части мы будем использовать наши знания для решения реальных асинхронных проблем, таких как извлечение данных с серверов.
Извлечение данных с серверов
Начнем с решения реальной проблемы с помощью асинхронного JavaScript.
Одной из проблем, с которой сталкиваются многие разработчики, является извлечение данных с сервера. Давайте воспользуемся экстремальным примером, чтобы проиллюстрировать серьезную проблему использования синхронного JavaScript для получения данных.
Представьте, что вы используете свое всепоющее, всетанцующее веб-приложение из Йемена. Согласно моему поверхностному критическому анализу, в Йемене средняя скорость интернета составляет менее 1 Мбит/с. Теперь представьте, что вашему веб-приложению необходимо загрузить относительно небольшой набор данных размером примерно 30 МБ. Подставив эти числа в онлайн-калькулятор, загрузка этого относительно небольшого набора данных заняла бы 240 секунд. Рисунок 1.
Это ахиллесова пята синхронного JavaScript. У пользователя нет другого выбора, кроме как подождать 240 секунд, прежде чем делать что-либо еще. Веб-приложение полностью блокируется и не интерактивно во время загрузки. Это распространенный пример ужасного взаимодействия с пользователем, и его следует избегать любой ценой!
240 секунд кажутся экстремальным примером, но многие исследования юзабилити показывают, что всего несколько секунд без интерактивного взаимодействия заставляют пользователей переходить в другое место. Помните, что каждая секунда имеет решающее значение для успеха вашего приложения. Время зависит не только от производительности — время также имеет решающее значение для удобного взаимодействия с пользователем.
Помните — сделайте ваши приложения адаптивными. Не расстраивайте своих пользователей и никогда не заставляйте их ждать!
Думать об этом. Сколько раз вы разочаровывались в тех приложениях, которые зависали во время рендеринга страницы? Я полагаю, что такой опыт глубоко укоренился в вашей жизни на данный момент, учитывая огромное количество заблокированных сайтов, которые продолжают досаждать Интернету ужасным пользовательским опытом.
К сожалению, такие блокирующие сайты являются скорее нормой, чем исключением. Чтобы уменьшить вероятность создания блокирующего сайта, мы можем использовать веб-API Fetch.
Асинхронная выборка данных с помощью Fetch API
API выборки извлекает ресурсыиз Интернета. Когда HTTP-клиент, например веб-браузер, отправляет HTTP-запрос, цель этого запроса называется ресурсом.
Мы получаем или изменяем ресурсы в Интернете, используя URI или универсальный идентификатор ресурса. Этот URI, который обычно отображается как адрес в веб-браузере, идентифицирует логические или физические ресурсы.
Давайте посмотрим на выборку в действии. Мы будем использовать fetch для получения сообщений с удаленного сервера, настроенного для ответа на HTTP-запросы.
Откройте Chrome и введите about:blank в адресную строку, чтобы получить минимальную HTML-страницу. Рисунок 2. Скопируйте код с рисунка 2 в консоль инструментов разработчика и нажмите Enter.
fetch() затем сделает запрос к http://jsonplaceholder.typicode.com/posts, который возвращает обещание. Если запрос выполнен, обещание выполнено. с объектом ответа. Если запрос не выполняется, обещание отклоняется. В этом случае мы видим, что обещание было выполнено и возвращен массив объектов, представляющих уникальные записи. Рисунок 3.
Если вы откроете вкладку сети в инструментах разработчика, вы сможете собрать обширную информацию об объектах запроса и ответа. Рисунок 4.
Поздравляем. Вы сделали свой первый асинхронный запрос ресурса в Интернете.
