Es2017 Async / Await спасает нас от ада цепочки обратных вызовов и обещаний
Зачем использовать асинхронные функции
Я пришел из компании, занимающейся программным обеспечением для предприятий, которая разрабатывала приложения в основном на Java (с JS для пользовательского интерфейса). Поэтому я привык работать с кодом, который имел строгую структуру и знал, когда и в каком порядке будут выполняться функции.
Забегая вперед, на 10 лет я перешел на стек JS на базе Node (который мне очень нравится), но быстро познакомился с «адом обратных вызовов».
Затем появился ES2017 async / await и спас положение - да !!!
Плюсы и минусы (асинхронный или обратный вызов)
У каждого подхода есть свои сильные и слабые стороны, и важно знать, в чем они заключаются, прежде чем делать что-либо с головой.
Начиная с The Con
- Для поддержки ES2017 требуются дополнительные плагины преобразования кода, которые могут добавить веса вашему приложению (например, Babel).
- Общая производительность
- Производительность отладки (использование try / catch для замедления работы узла)
Pro
- Полный контроль (при необходимости) над тем, когда выполнялась функция
- Простота (возможно, функции async / await легче читать)
- Лучшая поддержка «обещаний»
- Легкость работы с динамическим импортом (т.е. они возвращают обещания)
Представление
Для меня ключевыми преимуществами были простота и легкость работы с динамическим импортом, но нельзя игнорировать влияние на производительность.
С точки зрения производительности, мы действительно имеем в виду, насколько быстро приложение становится пригодным для использования на устройствах нашей аудитории.
C + T/L = U
(Время до компиляции приложения) + (Время до T передачи и L загрузки приложения на клиентское устройство) = Общее время до приложения. это U соболь
Скорость компиляции. Что ж, когда дело доходит до обратных вызовов по сравнению с асинхронными функциями, обратные вызовы побеждают по времени загрузки. Ознакомьтесь с тестами Сергея - ссылка. Вы также можете заметить в его результатах, что производительность асинхронных функций значительно улучшается с каждым выпуском Node, демонстрируя, что этот подход остается неизменным и со временем будет улучшаться.
Скорость передачи - это довольно просто: чем меньше набор приложений, тем быстрее его можно отправить клиенту. В странах, где интернет медленный и дорогой, размер приложения жизненно важен. Новым подходом к уменьшению размеров пакетов является использование «динамического импорта», который, по сути, представляет собой систему «своевременной загрузки кода», которая использует обещания (и именно здесь асинхронная функция действительно может помочь).
Таким образом, асинхронные функции в настоящее время замедляют время компиляции, но также могут помочь уменьшить размеры пакетов и, следовательно, чрезмерная разница во времени загрузки приложения может быть минимальной и улучшаться со временем.
Текущий способ ведения дел
Типичная страница JS включает:
- Импорт вверху страницы с использованием стандартного синтаксиса импорта / из
- Функции / обещания (с цепочками .then) / export / и т. Д.
И все мы склонны быть немного ленивыми, когда дело доходит до отлавливания ошибок обещаний, и если что-то еще, у нас просто будет глобальный ловитель.
Несколько примеров асинхронности
В том числе:
- Динамический импорт
- Асинхронный / ожидание
- Примеры, иллюстрирующие варианты использования с экспортом или выражениями мгновенно вызываемых функций (IIFE)
При таком подходе вы можете:
- Легко переключите весь свой импорт на «динамический импорт» (и при этом сохраните его аккуратно вверху кода)
- С помощью оболочки страницы, например: «(async () =› {}) (); » вы можете сразу использовать оператор await - например, для импорта вам нужно немедленно использовать
Последнее примечание - всегда используйте Try / Catch в своих асинхронных функциях
Поверьте мне в этом! Попытка отладить крайне неинформативные ошибки обещаний может стать настоящим кошмаром. Поэтому всегда добавляйте к своим функциям try / catch - и N.B. начиная с Node 6, вы не получаете штраф за их использование - читать дальше.
