Ожидаются обратные вызовы, обещания и асинхронный вызов ES6.
В этой статье мы поговорим об асинхронном JavaScript. Это непростая тема, но я объясню ее как можно проще и яснее, чтобы ребенок мог ее понять.
Прежде всего, позвольте мне рассказать вам историю:
Жили-были отец и сын. Они хотят вместе покататься на лодке, если будет солнечно. В противном случае они найдут другой способ провести выходные.
Поскольку это небольшой город, и у них нет Интернета, чтобы узнать погоду, отец сказал:
Отец: Сын мой ... тебе следует залезть на самое высокое дерево и узнать погоду.
Сын: Конечно, отец.
Отец: Я не пойду с вами, потому что я занят, но вы должны пообещать мне вернуться с ответом, несмотря ни на что. На основании вашего ответа я решу, что мы будем делать в эти выходные,
Сын: обещаю.
Важно понимать, что:
1) Отец очень занят, поэтому он будет заниматься другими делами, пока сын проверяет погоду.
2) Сын вернется домой и расскажет отцу об увиденном.
Давайте вместе посмотрим, что может произойти:
1. Удачный случай:
Когда сын залезает на дерево, и сегодня солнечный день. Он вернется домой счастливым, а на выходных они поплывут вместе.
2. Плохие новости:
Возможны плохие новости. Дождливый день - это не то, чего хочет ребенок, но иногда нам нужно оставаться дома (особенно сейчас, когда пандемия коронавируса). Сын вернется домой и расскажет отцу обо всех облаках, которые он видел. В этом случае, основываясь на ответе, отец решит остаться дома и поиграть в настольные игры.
3. Неожиданная ошибка:
Есть еще и третий вариант. Возможно, по какой-то непредсказуемой причине сын не смог узнать, пойдет ли дождь или нет. Был сильный туман или он не смог залезть на дерево… неважно. В результате мы не знаем погоды.
Даже в этом случае мальчик пообещал вернуться с ответом, чтобы он пошел домой и объяснил своему отцу, что произошло… потом…. отец примет решение.
А теперь поговорим о программировании. JavaScript работает точно так же.
Иногда мы хотим заняться другими делами (отец), пока ждем ответа (от сына).
Предположим, мы на сайте amazon.com и хотим найти новый телевизор. В продаже есть миллионы товаров, поэтому поиск телевизора по названию займет 2–3 секунды.
Тем временем браузер может делать другие вещи, не связанные с нашим поиском. (например, открытие чат-бота или раскрашивание страницы).
Через 2–3 секунды мы получим ответ:
- Товар есть в наличии и мы можем его купить.
- Товара нет в наличии, и магазин порекомендует что-то другое.
- При подключении к базе данных возникла проблема. В этом случае на сайте должно будет отображаться сообщение об ошибке.
Хорошо, хорошо, это хорошая история, но ... как я могу ее использовать?
А) Использование обратных вызовов:
Я действительно не рекомендую больше использовать обратные вызовы. Код будет сложно понять и поддерживать. Вы можете выполнить поиск по запросу «ад обратных звонков», чтобы узнать больше.
В нашем случае отец будет ждать сына. Но, возможно, матери придется подождать, пока отец не примет решение, а сын… вы его примете.
Б) Использование обещаний
В качестве альтернативы обратным вызовам JavaScript представил Promises.
Основная идея очень проста. Обещание будет иметь 2 функции:
- Решимость: вызывается, когда задание выполнено (мальчик залез на дерево. Неважно, солнечно или дождливо, но у нас есть свой ответ)
- Отклонить: это происходит, когда мы сталкиваемся с ошибкой (дерево горело)
Его легче читать, чем обратные вызовы, но это все равно много кода. У нас больше нет ада обратных вызовов, но мы можем пообещать ад: D
C) Асинхронное ожидание - ES6
В 2015 году JavaScript представил новый синтаксический сахар для обещаний.
Вы можете найти много очень хороших материалов, которые объясняют функции ES6, но в качестве общей идеи вам нужно понимать два ключевых слова:
- async: ожидающая чего-либо функция должна быть асинхронной. В нашем случае отец будет асинхронным, а мальчик - обещанием.
- Внутри функции async мы можем использовать await. JavaScript будет знать, что нужно выполнить остальную часть кода, только после того, как ожидаемая функция будет разрешена.
Вывод:
В программировании важно понимать, как что-то работает и почему. С помощью этой истории вы можете объяснить обратные вызовы, обещания и асинхронное ожидание любому, даже ребенку.
Сообщите мне, что вы думаете об этой статье и о том, какие еще темы заслуживают рассказа.
Кредиты:
Как ни странно, похожую историю я прочитал, когда изучал JavaScript. Это старая статья об AngularJS, написанная Энди Шора, но идея, лежащая в ее основе, послужила источником вдохновения для этой статьи.
Вы можете проверить это здесь:
Сообщите мне, что вы думаете об этой статье и о том, какие еще темы заслуживают рассказа.
