JavaScript событийный цикл Event Loop, асинхронный код, промисы (Promise), async / await

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@kolyanixx5311]

Единственный блогер объясняющий без воды)

[@akylbekbaizakov]

Сложная тема. Но объясняете хорошо. Благодарю!

[@NurgulMadanbekova]

Из тысячи блогеров вещающие про программирование, Александр очень четко,коротко и ясно обьясняет)) Cейчас я в процессе обучения программирование и очень круто помогают ваши видео)Спасибо!

[@mirci5459]

оогооо, впервые вижу такие подробные уроки по JS, так держать! Прям так же подробно по js, как и simple code по c++ - такие люди редкость прям (год назад искал тоже уроки о js, но все было разбросано и не достаточно понятно в отличие от этих уроков)

[@Roman-k9l6v]

Спасибо тебе, добрый человек. Не забрасывай только, очень полезные материалы

[@Ozeum]

Огромное спасибо, максимально лаконично, информативно и полезно. Жду мастер-класс 🎉

[@Anatoli-bq1pe]

Благодарю за очередной классный видос!

[@jekakavaltchuk2714]

Очень хорошо объяснил, благодарю)

[@vitkul]

Спасибо. Очень доступно объяснил.

[@dsmorodiny]

Блин такая подача классная и так мало лайков… За то у Минина просмотров огромное количество но смотреть не возможно…Успехов тебе дружище и спасибо.

[@umudumu]

Дождались самого животрепещущего урока.

[@sntfootball567]

Спасибо за урок. Очень информативно

[@johanferding9485]

Как раз то, что искал, спасибо за Вашу работу 😉👍

[@АлександрСальников-с2ж]

Коммент в поддержку, спасибо за урок!

[@СтаниславГорячев-г1ъ]

Спасибо вам большое, очень все понятно

[@mouri_san]

Спасибо за урок!

[@ГеоргийМеньшиков-п5ю]

хотел уточнить на 16:37 , функция makeRequest принимает два параметра url и onSuccess, но при вызове промиса вызывается с одним параметром url, так и должно быть? Один из лучших каналов по фронтенду, все разложено по плейлистам, огонь! Спасибо!

[@AleksanderLamkov]

Функция makeRequest фейковая, не настоящая. Да, по-хорошему она внутри себя должна использовать и параметр url и onSuccess, но это в объяснении текущей темы опускается, чтобы не запутаться. P. S. Про клиент-серверное взаимодействие и функцию fetch, с помощью которой выполняются настоящие запросы к серверу, я рассказываю в одном из дальнейших уроков этого курса.

[@ГеоргийМеньшиков-п5ю]

@@AleksanderLamkov понял, спасибо!

[@andreyboikov]

Спасибо, очень полезно :)

[@smotritelyoutube]

Супер, лайк!

[@ДиляраЗубарева-й1о]

Спасибо большое за урок! Пока мало что понятно по этой теме, но надеюсь понимание придет. Почему-то у меня не получилось подключить type="module" в html. Вывелось сразу две ошибки, хотя делаю все, как на видео. В чем может быть причина?

[@AleksanderLamkov]

Попробуй открыть страницу через WebStorm и пункт 'Open in => Browser' из контекстного меню. А если у тебя VSCode, то нужен LiveServer. Иначе JS-модули не будут работать в локально открытом html-файле через обычный проводник.

[@w0x3rrr81]

Привет,не совсем понял почему при указании типа подключения js файла в html заработал await в глобальной области видимости?

[@AleksanderLamkov]

Ограничения языка - await в глобальной области видимости работает только в модулях. Но в скором времени и без указания type="module" будет работать. А пока что без этого никак.

[@w0x3rrr81]

@@AleksanderLamkov интересно,на learn.js нет такой инфы,благодарю)

[@КириллКараваев-т7ш]

Эх, я понимаю, что объяснение хорошее, но почему-то эта тема даже труднее, чем то, что Вы называли трудным: классы...

[@AleksanderLamkov]

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

[@karangan]

А есть какое-то техническое объяснение почему ты используешь fulfill вместо resolve? Есть ли вообще разница, или это просто вкусовщина?

[@AleksanderLamkov]

Нет разницы в том, как называть эту функцию. Я решил в объяснении использовать это слово, т. к. оно созвучно названию состояния 'fulfilled'. Думал так будет проще зрителю воспринять материал. Сам же в своем коде я чаще использую слово resolve в подобных местах.

[@SuperWolchara]

В случае с фетч который возвращает промис трай кетч не отловит плохой ответ по статусу, а жаль. Пиши свой кастомный фетч)

[@ntldrzic]

Плохой статус, это не ошибка выполнения самого запроса, а один из вариантов ответа. Хотя axios кажется возвращает reject на 400 и 500

[@sardar9995]

Шаг за шагом год за годом

[@andrf]

боже я прозрел

[@gabbergabberovich]

Привет, ты как-то странно объясняешь про многопоточность, называя это событийным циклом. Просто JS сам себе многопоточный в отличие тех же PHP и Java. Обучающемуся нужно понять что такое многопоточность, и код который висит в функциях(методах) начинает отрабатывать по забинденному событию или тому же setTimrout-у. И блоки исполняемого кода в таких событийных функциях работают независимо друг от друга. А так все замечательно, продолжай в том же духе.

[@AleksanderLamkov]

Во всех материалах, на которые я ориентировался, акцентируют внимание на том, что JS - однопоточный. Исключения - NodeJS с определенной версии и WebWorkers. Или ты имеешь в виду, что асинхронность = многопоточность? Такую аналогию видел, но её нечасто используют.

[@gabbergabberovich]

@@AleksanderLamkov JS многопоточный, от куда у тебя инфа про однопоточность? Вся прелесть ECMAScript(если не не изменяет память) второй версии именно это и преподносила как совершенно другой подход в программировании, а именно - параллельность исполнения кода.

[@AleksanderLamkov]

@gabbergabberovich Третий абзац в «Кратко»: doka.guide/js/async-in-js/ Вся статья и комментарии к ней: habr.com/en/amp/publications/786330/ И миллион других ресурсов по запросу в гугле «js однопоточный». Вообще, я не фанат обмусоливания теории. Мне искренне плевать на то, какой язык, однопоточный, псевдо-однопоточный, многопоточный или псевдо-многопоточный. Философия моего «я» во фронтенде - «я крашу кнопки за большой прайс». Я понимаю как делать «фронтенд» и зарабатываю на этом. И пытаюсь научить этому других. Теоретические знания - то, чем можно выпендрится на собеседованиях в МААНГ и в публичных пространствах в интернете. Меня это не цепляет. Если знания нельзя применить на практике (за исключением супер-специфичных ситуаций), то в моей картине мира эти знания бесполезны. И я не гнушаюсь транслировать свою философию в массы, т. к. моя карьера - органичный воспроизводимый путь. Не нужно быть Computer Science адептом и экспертом спецификации JavaScript, чтобы делать современный удобный красивый, быстрый и удобнорасширяемый фронтенд. Даже если мы докопаемся этим диалогом до сути, то на практике я эти знания не применю, поэтому со временем они забудутся.

[@maximmadan]

Java многопоточная

[@mushroom2267]

@@gabbergabberovich с каких пор js стал многопоточным? не вводи людей в заблуждение. Это как написали выше java многопоточный

[@AndrejMoskalev]

коммент

[@offernity2707]

мне стало становиться совсем непонятно (

[@AleksanderLamkov]

А с чем именно возникли сложности? Может я помогу.

[@Prolaps-us]

Событийный 😂😂😂 Цикл событий, диспетчер, рабочий цикл - но ни как не событийный.

[@AleksanderLamkov]

Вот это да, полностью же меняется суть концепции, если назвать её чуточку иначе…

[@Prolaps-us]

@@AleksanderLamkov суть не меняется, меняется восприятие. название выглядит как кривой пиратский перевод с китайского.

[@eobardmeef8166]

@@Prolaps-us во многих учебниках написано "Событийный цикл", например в learn.js.

[@foxkodland9516]

Ужас, как же сложно объясняешь несложные вещи 3/4 воды 😔

[@AleksanderLamkov]

А конкретнее? Что именно я усложнил при объяснении? Уточни, пожалуйста.

[@foxkodland9516]

@@AleksanderLamkov привет! смотрел у тебя часовое видео по верстке с scss - это был лучший контент, который я видел на ютубе - сухо, по делу и с практикой здесь же затрагивается сразу много тем; не всегда понятно, зачем приводятся примеры и разные усложнения в виде таймеров, new Promise или информации об одном потоке, которая не раскрыта до конца. Сложные термины были озвучены без объяснений И есть слова, которые сбивают с толку, например, твой комментарий, что await заставляет ждать выполнение промиса - да, все это верно по документации, но когда слушаешь это в контексте потока, о котором ты говорил в начале, то непонятно, как именно это ожидание работает: останавливается весь код или интерпретатор работает с другими задачами? поймал себя на мысли к 20 минуте видео, что в голове каша, и ведущий поверхностно говорит о разных гранях асинхронности, хотя эту тему можно изложить лаконичнее и с практическими примерами. А здесь как будто пересказ статьи про async/await в js - технически все верно сказано, но такие объяснения сложны на мой коммент не серчай, успехов тебе)

[@AleksanderLamkov]

Спасибо за развернутую критику! Тема урока непростая, упрощал как мог. В будущем постараюсь учесть моменты, на которые ты указал.

[@Triplanar]

Как всегда топ

[@elkhanhuseinov9804]

Это всё прекрасно. Автору несомненно большой респект за труд и помощь. Но весь материал по JS один и тот-же, вот если бы преподавали JS сразу на примере повседневных задач фронтенд разработчика - что бы пришло понимание, когда и где использовать тот или иной метод, но этого нигде нету.... Где найти такие курсы? Что бы и много лишнего не учить, и понимать как использовать все навыки на деле (создавая web-страницу к примеру).

[@AleksanderLamkov]

Это будет в мастер-классе. Невозможно создать такой курс с 0, где сразу же будут показываться боевые задачи фронтенд-разработчика. И в моем курсе нет, на мой взгляд, ничего лишнего. Всё, что я тут объясняю, применялось мною на практике за последние годы. Я как раз таки опускаю ненужные вещи, чтобы не забивать новичкам голову мусорной теорией.

[@elkhanhuseinov9804]

@@AleksanderLamkov ❤️👍🏼 Во всяком случае огромное вам спасибо

[@miwanjaGR]

Очень хорошо объяснил, благодарю)