Синхронное кодирование

Если вы какое-то время работаете с JavaScript, я уверен, что вы должны быть знакомы с синхронным стилем кодирования. Однако вот краткое резюме.

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

Реальный сценарий

По мере того, как вы переходите от внешнего интерфейса к внутреннему, вы скоро поймете, что синхронного стиля кодирования недостаточно для выполнения кода в желаемом порядке.

Как разработчик, мы часто делаем запросы к серверам для отправки данных, и этот процесс может занять от нескольких секунд до нескольких минут (в зависимости от сервера, к которому мы обращаемся). Очевидно, мы не хотим, чтобы наш код останавливался и ждал, вместо этого мы предпочли бы выполнять другие функции в нашей программе. Именно здесь на помощь приходит наш асинхронный стиль кодирования.

JavaScript предоставляет нам множество функций, которые могут помочь нам запланировать асинхронные действия. Здесь я буду использовать функцию setTimeOut, чтобы отобразить время задержки ответа (см. Это для получения дополнительной информации - › https://javascript.info/settimeout-setinterval ), которая в основном позволяет нам запускать функцию один раз после интервала время)

(Не обращайте внимания на «Активная перезагрузка включена».)

Здесь мы видим, что код не выполняется построчно (т.е. синхронно). Вместо этого функция setTimeout () выполняется через 3 секунды, что делает ее асинхронной функцией.

Проблема с асинхронным кодом

Мы уже видели, зачем нам нужен асинхронный стиль кодирования. Давайте теперь обсудим проблемы с этим стилем кодирования.

Предположим, вы хотите запустить func2 только после завершения func1. Как разработчик, вы не знаете, сколько времени потребуется серверу, чтобы отправить запрошенные данные обратно в func1 (скажем, t1) и сколько времени потребуется func1 для обработки этих данных и выдачи результата (скажем, t2)

Теперь могут возникнуть два возможных случая -

Случай 1 - t1 + t2 ‹время, затраченное func2 на выполнение

Случай 2 - t1 + t2 ›время, затраченное функцией func2 на выполнение

В случае 1 функция func2 будет успешно выполнена, поскольку она получит доступ к результату, заданному функцией func1. Однако в случае 2 func2 выдаст ошибку, так как НЕ БУДЕТ! иметь доступ к результату, предоставленному func1.

Таким образом, чтобы преодолеть эту проблему, были введены функции «обратного вызова». Позже в язык JavaScript были введены «обещания», которые предоставляют нам более элегантный способ обработки асинхронного кода. Затем было введено «async await», чтобы иметь дело с асинхронным кодом в еще большем! элегантный способ.

Что такое обратные вызовы?

В JavaScript функции - это первоклассные объекты. Можем ли мы передать объект в качестве параметра функции? Очевидно, да. Итак, можем ли мы передать функцию в качестве параметра другим функциям? Кроме того, да!

В JavaScript мы можем передать одну функцию в качестве параметра другой функции, а затем вызвать первую функцию внутри более поздней функции. Это не так сложно, как кажется. В приведенном ниже примере мы используем метод setTimeout (встроенная функция JavaScript).

Мы также можем использовать обозначение стрелочной функции. Нравится

Таким образом, мы можем сказать, что разрешено передавать функцию в качестве аргумента другой функции.

Теперь перейдем к решению проблемы, возникшей в случае 2. Здесь я снова буду использовать setTimeOut, чтобы изобразить поведение, подобное серверу.

Как мы видим, func2 выполняется до func1. Мы этого не хотим.

Решение указанной выше проблемы

Приведенный выше код был выполнен через 2000 мсек. (После выполнения func1)

В приведенном выше коде мы передали функцию обратного вызова (вы можете называть ее как хотите) в качестве аргумента функции func1, а затем вызываем функцию обратного вызова внутри функции func1. Позже, в последней строке, мы передали func2 в качестве параметра (что сделало его обратным вызовом) внутри func1

Проблема с обратными вызовами - ад обратных вызовов

Помните, я сказал, что были введены «обещания»? Вот почему

Рассмотрим следующий пример: здесь мы выполняем func1, затем, как только это будет сделано, мы выполняем func2, и как только это будет сделано, мы, наконец, выполняем func3

Выглядит страшно, правда? А теперь представьте, хотим ли мы выполнить 20, 30 или даже 100 таких последовательных задач. Сложность чтения такого кода прямо пропорциональна количеству последовательных задач, которые мы хотим выполнить. Таким образом, для повышения удобочитаемости были введены «обещания».

Обзор

В этой статье мы определили синхронный стиль кодирования. Затем мы перешли к асинхронному стилю и, осознав проблемы с асинхронным, узнали о Обратных вызовах для управления нашим асинхронным кодом.

Куда теперь идти?

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

Да, и, следовательно, ваша задача - узнать больше о том, как асинхронное кодирование возможно на таком языке, как JavaScript.

Если все еще не понятно, следите за обновлениями другого блога в разделе «Insides of Asynchronous»