Ожидаются обратные вызовы, обещания и асинхронный вызов ES6.

В этой статье мы поговорим об асинхронном JavaScript. Это непростая тема, но я объясню ее как можно проще и яснее, чтобы ребенок мог ее понять.

Прежде всего, позвольте мне рассказать вам историю:

Жили-были отец и сын. Они хотят вместе покататься на лодке, если будет солнечно. В противном случае они найдут другой способ провести выходные.

Поскольку это небольшой город, и у них нет Интернета, чтобы узнать погоду, отец сказал:

Отец: Сын мой ... тебе следует залезть на самое высокое дерево и узнать погоду.

Сын: Конечно, отец.

Отец: Я не пойду с вами, потому что я занят, но вы должны пообещать мне вернуться с ответом, несмотря ни на что. На основании вашего ответа я решу, что мы будем делать в эти выходные,

Сын: обещаю.

Важно понимать, что:
1) Отец очень занят, поэтому он будет заниматься другими делами, пока сын проверяет погоду.

2) Сын вернется домой и расскажет отцу об увиденном.

Давайте вместе посмотрим, что может произойти:

1. Удачный случай:

Когда сын залезает на дерево, и сегодня солнечный день. Он вернется домой счастливым, а на выходных они поплывут вместе.

2. Плохие новости:

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

3. Неожиданная ошибка:

Есть еще и третий вариант. Возможно, по какой-то непредсказуемой причине сын не смог узнать, пойдет ли дождь или нет. Был сильный туман или он не смог залезть на дерево… неважно. В результате мы не знаем погоды.

Даже в этом случае мальчик пообещал вернуться с ответом, чтобы он пошел домой и объяснил своему отцу, что произошло… потом…. отец примет решение.

А теперь поговорим о программировании. JavaScript работает точно так же.

Иногда мы хотим заняться другими делами (отец), пока ждем ответа (от сына).

Предположим, мы на сайте amazon.com и хотим найти новый телевизор. В продаже есть миллионы товаров, поэтому поиск телевизора по названию займет 2–3 секунды.

Тем временем браузер может делать другие вещи, не связанные с нашим поиском. (например, открытие чат-бота или раскрашивание страницы).

Через 2–3 секунды мы получим ответ:

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

Хорошо, хорошо, это хорошая история, но ... как я могу ее использовать?

А) Использование обратных вызовов:

Я действительно не рекомендую больше использовать обратные вызовы. Код будет сложно понять и поддерживать. Вы можете выполнить поиск по запросу «ад обратных звонков», чтобы узнать больше.

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

Б) Использование обещаний

В качестве альтернативы обратным вызовам JavaScript представил Promises.

Основная идея очень проста. Обещание будет иметь 2 функции:

  • Решимость: вызывается, когда задание выполнено (мальчик залез на дерево. Неважно, солнечно или дождливо, но у нас есть свой ответ)
  • Отклонить: это происходит, когда мы сталкиваемся с ошибкой (дерево горело)

Его легче читать, чем обратные вызовы, но это все равно много кода. У нас больше нет ада обратных вызовов, но мы можем пообещать ад: D

C) Асинхронное ожидание - ES6

В 2015 году JavaScript представил новый синтаксический сахар для обещаний.

Вы можете найти много очень хороших материалов, которые объясняют функции ES6, но в качестве общей идеи вам нужно понимать два ключевых слова:

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

Вывод:

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

Сообщите мне, что вы думаете об этой статье и о том, какие еще темы заслуживают рассказа.

Кредиты:

Как ни странно, похожую историю я прочитал, когда изучал JavaScript. Это старая статья об AngularJS, написанная Энди Шора, но идея, лежащая в ее основе, послужила источником вдохновения для этой статьи.

Вы можете проверить это здесь:



Сообщите мне, что вы думаете об этой статье и о том, какие еще темы заслуживают рассказа.