Эта статья направлена на то, что люди начинают с асинхронного кодирования в JavaScript, поэтому мы будем держать вещи простыми, избегая громких слов, функций стрел, матриц и т. Д.
Обратные вызовы являются одной из наиболее используемых концепций современного функционального JavaScript, и если вы когда -либо использовали jQuery, скорее всего, вы уже использовали обратные вызовы, даже не зная (мы вернемся к нему через минуту).
Каковы, черт возьми, функции обратного вызова?
Функция обратного вызова в его простых терминах – это функция, которая передается другой функции, в качестве параметра. Функция обратного вызова затем выполняется внутри функции, в которой она передается, и конечный результат возвращается вызывающему абоненту.
// I'm sure you've seen a JQuery code snippet like this at some point in your life!
// The parameter we're passing to the `click` method here is a callback function.
$("button").click(function() {
alert('clicked on button`);
});
Просто, верно? Теперь давайте реализуем функцию обратного вызова, чтобы получить результаты по выравниванию в воображаемой игре.
Однажды внутри startGame () Функция, мы называем Loneyone () Функция с параметрами в качестве CurrentScore и нашей функции обратного вызова ().
Когда мы называем Loneyone () Внутри startGame () Область функции, асинхронно, JavaScript выполняет функцию Loneyone () И основная ветка продолжает идти вперед с оставшейся частью нашего кода.
Это означает, что мы можем выполнять все виды операций, такие как извлечение данных из API, выполнение некоторой математики и т. Д., Все, что может быть трудоемким, и, следовательно, мы не будем блокировать нашу основную ветку для нее. После того, как функция ( dehyone () ) выполнила свои операции, она может выполнить функцию обратного вызова, которую мы прошли ранее.
Это чрезвычайно полезная особенность функционального программирования, поскольку обратные вызовы позволяют нам обрабатывать код асинхронно без нас, придется ждать ответа. Например, вы можете сделать вызов Ajax на медленный сервер с фан -обратным вызовом. И полностью забудьте об этом и продолжайте с оставшимся кодом. Как только вызов Ajax будет разрешен, функция обратного вызова выполняется автоматически.
Но обратные вызовы могут стать противными, если в цепочке есть несколько уровней обратных вызовов. Давайте возьмем приведенный выше пример и добавим еще несколько уровней в нашу игру.
Подожди, что только что случилось? Мы добавили две новые функции для логики уровня, leveltwo () и levelthree () Анкет Внутренний обратный вызов LedenOne (строка № 22), называемая функцией leveltwo () с фан -обратным вызовом. и результат обратного вызова Toneone. И повторите то же самое для функции levelThree () снова.
Теперь представьте себе, каким станет этот код, если нам пришлось реализовать ту же логику на 10 уровней. Вы уже паникуете? Ну я! По мере увеличения количества вложенных функций обратного вызова становится все труднее читать ваш код и еще труднее отладки.
Это часто ласково известно как Обратный обратный ход Анкет Есть ли выход из этого ада обратного вызова?
Я обещаю, что есть лучший способ
JavaScript начал поддержать обещания от ES6. Обещания – это в основном объекты, представляющие возможное завершение (или сбой) асинхронной операции, и ее полученное значение.
// This is how a sample promise declaration looks like. The promise constructor
// takes one argument which is a callback with two parameters, `resolve` and
// `reject`. Do something within the callback, then call resolve if everything
// worked, otherwise call reject.
var promise = new Promise(function(resolve, reject) {
// do a thing or twenty
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
Давайте попробуем переписать наш пример обратного вызова ада с обещаниями.
Мы переписываем наши функции уровня (один/два/три), чтобы удалить обратные вызовы из параметра функции и вместо того, чтобы вызовать функцию обратного вызовов внутри них, заменена обещаниями.
После того, как стартап будет разрешен, мы можем просто вызвать .тогда () Метод на нем и обрабатывайте результат. Мы можем цепорить несколько обещаний один за другим с .тогда () Цепочка Анкет
Это делает весь код намного более читабельным и проще для понимания с точки зрения происходящего, и Тогда Что произойдет дальше и так далее.
Глубокая причина, по которой обещания часто лучше, заключается в том, что они более композируются, что примерно означает, что комбинирование нескольких обещаний «просто работает» при сочетании нескольких вызовов часто нет.
Кроме того, когда у нас есть единственный обратный вызов против единого обещания, это правда, что нет существенной разницы. Именно когда у вас есть миллионы обратных вызовов против миллионов обещаний, код, основанный на обещаниях, имеет тенденцию выглядеть намного приятнее.
Хорошо, мы успешно сбежали из ада обратного вызова и сделали наш код очень читабельным с обещаниями. Но что, если я скажу вам, что есть способ сделать его чище и читаемым?
(а) Подождите
Async- wait поддерживается в JavaScript с ECMA2017. Они позволяют вам писать код на основе перспективы, как если бы это был синхронный код, но не блокируя основной поток. Они делают ваш асинхронный код менее «умным» и более читаемым.
Честно говоря, асинхронологии-это не что иное, как синтаксический сахар на вершине обещаний, но он делает асинхронное код и ведет себя немного больше похоже на синхронный код, именно в этом и то, где находится сила.
Если вы используете Асинхронизация Ключевое слово перед определением функции, вы можете использовать ждет внутри функции. Когда ты ждет Обещание, функция приостановлена не блокирующим, пока обещание не урегулирует. Если обещание выполняется, вы получите ценность обратно. Если обещание отвергает, отклоненое значение брошено.
Давайте теперь посмотрим, как выглядит наша игровая логика, как только мы переписываем ее с асинкваитами!
Сразу же наш код становится гораздо более читабельным, но асинхронно есть еще кое-что.
Обработка ошибок является одной из главных особенностей Async-Await, которая выделяется. Наконец, мы можем обрабатывать как синхронные, так и асинхронные ошибки с одной и той же конструкцией с помощью Try и улова, что было болью с обещаниями без дублирования блоков для пробуждения.
Следующим лучшим улучшением от старого старого мира обещания является отладка кода. Когда мы пишем обещания на основе функций со стрелками, мы не можем установить точки останова в наших функциях стрелки, чтобы отладка была тяжелой. Но с асинкваитами отладка похожа на то, как вы делаете синхронный кусок кода.
Я уверен, что к настоящему времени у вас лучшее понимание асинхронного программирования в JavaScript. Если у вас есть вопрос, дайте мне знать ниже. Если вы нашли это полезным, Дай мне крик в Твиттере !
Счастливого кодирования! ✌
Оригинал: “https://dev.to/siwalikm/async-programming-basics-every-js-developer-should-know-in-2018-a9c”