Асинхронный код в Javascript
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Асинхронные функции в Javascript: async / await / fetch
Теория и практика. Создание блога.
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend
👁🗨 Дзен: dzen.ru/frontend
👁🗨 Rutube: rutube.ru/u/fr...
Сначала не хотел смотреть, т.к. показалось, что там рассказывать на 39 минут, но в итоге это оказалось самым интересным и наглядным видео по теме асинхронности. Моя благодарность автору! Ближе к концу уже сложнее понять и уследить логику. Но очень приятно смотреть и вникать)
Спасибо большое! Без Ваших видео я бы неделями сидел над практическими, а скорее всего бросил учиться в скилбокс.
Согласна полностью))) смотришь обучающее видео и чувствуешь себя дебилом, заходишь к Александру - все понятно и адекватно)) Спасибо!
Очень приятно читать. Спасибо. Надеюсь со временем программирование будет даваться проще. Прошу прощения за долгий ответ :)
Огромное спасибо ) Такие комментарии поднимают боевой дух. Буду работать над следующими роликами)
Александр, спасибо за ваш урок, очень помогаете в возникающих вопросах! Подробно рассказано вся та информация, которую полой сложно собрать в кучу!
Продолжайте!
Спасибо за вашу поддержку и отклик. Очень радует, что ролик был для вас полезным :)
Александр большое спасибо за суперское видео и замечательный разбор! Очень жаль, что не ваши видео с преподаванием записаны в Скиллбокс в курсе по js...
Большое спасибо за Ваши видео! Очень помогает в обучении. Нравится подача, приятный голос и речь.
Спасибо вам, что вы смотрите ролики и комментарий. Это важная поддержка. К сожалению не всегда получается ответить вовремя (
Александр, спасибо за это видео. Наконец-то у меня в голове все, что касается синхронности и асинхронности, разложилось по полочкам. Был бы рад, если бы Вы записали видео по промисам. Учусь на продвинутом курсе JS в Skillbox и эта тема воспринимается с трудом.
Спасибо за ваш комментарий :) Да, очень вас понимаю :) Тема промисов супер запутанная сама по себе ) Думаю о том, как ее рассказать на понятном примере :)
очень полезное видео. Где то про ассинхроность слышу мельком и вспомнил что у вас есть. Теперь более лучше узнал об этом из ваших объяснений. Спасибо вам!!!
Спасибо вам. Надеюсь стало чуть понятнее :) Пытался разобрать тему более простыми словами)
На этом канале каждая секунда "на вес золота", т.к. он "пропитан" очень ценой информацией и желанием автора донести эту информацию в доступной и понятной форме таким "чайникам" как я! :-))
Андрей, спасибо большое за такой приятный комментарий☺ желаю удачи в изучении курса 🤗
Александр, спасибо за видео! Жду от вас серию по реакту+редаксу
Спасибо за вашу поддержку. Я планировал по VUE сделать вводное видео. По реакту возможно. Но на это понадобится чуть больше времени :)
@@alex_dudukalo Александр с удовольствие посмотрю по вью! Реакта много на просторах, а вот вью поменьше будет
лучше объяснений я еще не видел, 10 из 10. спасибо
Очень приятно читать :) Спасибо вам
как всегда → на высоте! Вам конкретно надо преподавать → студенты Вас на руках носить будут:)
Большое спасибо за ваш приятнейший комментарий)) Будем работать и улучшать подачу) Да, я люблю преподавать )
хорошее видео для начинающего, продолжай в том же духе, интересно увидеть от тебя урок реакта
Класс!! Повторила все за вами, но комменты вывести не смогла, надо еще раз пересмотреть все. Надеюсь не забросите канал, после этого видео взаимодействие с сервером стало понятнее, для меня эта прямо сложная тема
Спасибо! Самое понятное объяснение про асинхронные функции!
Спасибо за комментарий. вы приблизились к финалу )
Хорошее видео, понятное объяснение
Спасибо за ваш комментарий 😇
Очень информативно и понятно, большое спасибо!
Большое спасибо за ваш комментарий )
Это прям то что я искал! Большое человеческое спасибо!
Спасибо за ваш комментарий :))
Спасибо Вам большое за видео, все очень понятно и полезно))))
Спасибо вас за поддержку вашими комментариями. Очень помогает каналу )
В очередной раз благодарю за такое наглядное и доступное объяснение, смотрю ваши видео даже просто так по уже изученным темам чтобы лучше понять все и закрепить
Очень приятно читать такие комментарии 😊 ваша поддержка 💪 мотивирует, спасибо!))
Все как мастер наказал: подписка, лайк, комментарий!
Спасибо за отклик и просмотр :)
Здорово!!! Очень доступно объясняете, спасибо Вам за видео 💗
Спасибо за ваш приятный комментарий :) Буду стараться для вас. Надеясь, что вы останетесь на канале :)
Спасибо, все разложили по полочкам, очень интересно.
Спасибо за вашу поддержку. Думаю теперь будет проще понимать принцип работы с асинхронными функциями :)
Все круто !!! Спасибо !!! Ждем продолжение, а то что то пагинацию не удалось реализовать , и комментарии добавляются все скопом, НУЖНА ВАША ПОСКАЗКА В ВИДЕ ВИДЕО ПРОДОЛЖЕНИЯ !!!!!!!!!!!!!))))
Спасибо вам за отлики. Пагинацию я хочу показать в отдельном видео. Это интересная тема. Она не относится напрямую к асинхронности. Но там есть интересные решения. Если вам нужен пример пагинации, вы можете написать мне в телеграме. Канал в ссылке под видео :)
Александр, еще раз выражаю свою благодарность! С душой объясняете. Видно, что не начитываете, а с собственным пониманием материала, и с желанием добиться понимания даже от самых непонятливых! Спасибо! Единственное, столкнулся с тем, что формулировка await не работала как у вас вне async функции. Пришлось оборачивать ее в анонимную функцию! А у вас все работает, даже сам javaScript вас слушает!!!)))
Наконец то простым языком объяснили что такое асинхронные функции и как их правильно применять!
Спасибо за ваш комментарий😊 приятно, что канал вам понятен и полезен😊 надеюсь другие видео вам также понравятся))
Прекрасное видео по асинхронности. Спасибо вам большое, что все наглядно рассказали и показали. Сразу подписался
Спасибо за видео, но нужен полный разбор по созданию блога, с комментариями к статьям и постраничной навигацией))
Да, пожалуй я запишу такой ролик) С более подробным разбором :) Спасибо вам :)
Колокольчик давно нажат) Думал что просмотрел все видео у вас на канале, но оказывается нет, нашёл это видео и смотрю его перед сном, спасибо Александр.
Спасибо за отзыв ☺ приятно, что вы просмотрели весь материал и он оказался вам полезен, оставайтесь на канале, скоро будет новое видео 😊
Очень классный пример работы с промисами, с данными с сервера и как их отображать в HTML. Было бы здорово увидеть разбор с получением и отображением с сервера данных, которые запрашиваем через input. К примеру, поиск фильмов и отображение их по запросу пользователя.
Спасибо за качественный материал
Спасибо 🤗 рад, что видео вам понравилось, также спасибо за идею для нового ролика)) оставайтесь на канале😊
Благодарю, Александр. Нужное видео. Музыка фоновая приятная
Спасибо Александр, контент - топ!
Большое спасибо, приятно что вы оставили комментарий :)
спасибо большое Александр за видео!
Спасибо вам ))
Прекрасное, подробное объяснение информации со стопами для самопроверки. Продолжайте
Можно побольше таких видео о промисах, апи, контексте вызова, каллбэк функции, да и вообще продвинутый JS простыми словами
Спасибо вам за комментарий. Да, конечно, я планирую развивать тему продвинутого JS ) Дальше, больше роликов. Делитесь в комментариях, на какую тему хотели бы посмотреть разбор.
Александр, спасибо Вам огромное!!!
Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны))
Александр, спасибо! Это очень классное видео - интересно, доступно и всё очень понятно. А практика вообще выше всяких похвал! Только моя 7-я винда не поддерживает type="module", но я нашла как обойти эту ошибку :)
Спасибо за видео, не останавливайтесь у вас хорошо получается 👍
самое лучшее объяснение! аплодирую стоя
Приятно читать такую обратную связь ☺ваша поддержка очень мотивирует, спасибо!)
очень нужное и интересное видео. Спасибо!
Спасибо большое за Ваши труды!
Спасибо за отзыв 🤗 ваша поддержка очень важна☺
@@alex_dudukalo очень жду от Вас курс по JS 2 часть:) на Вашем канале почти все видео посмотрел
@@user-en7qg2dq3m приятно читать, и осознавать, что контент, который я делаю вам нравится :) Думаю, уже скоро будут первые ролики. Хочется сделать все максимально хорошо :) И хочется уже скорее поделиться результатом.
Было очень интересно и доступно, как всегда супер 👍
Спасибо за вашу поддержку 🤗🔥
Отличный урок! Спасибо
Спасибо за обратную связь 🤗 надеюсь и другие видео канала вам понравятся))
Хорошее объяснение!
Спасибо за ваш комментарий )
Большое спасибо за контент! В тренды ютуба!
Спасибо! Супер!
Мне кажется, говорить о параллельном выполнении не правильно, т.к. по сути эти функции не выполняются одновременно (нет двух "дорог", нет многопоточности), просто асинхронная функция ждет какой-то количество времени, а потом начинает выполняться. Т.е. еще раз - код в ней не выполняется одновременно с какой-то другой функцией, просто она ждет пока протикает таймер, а другие функции в это время выполняются, по истечению времени она становится в очередь и выполняется.
Поправьте, если не прав, но я это, как-то, так запомнил
Конечно вы правы. Есть цикл работы, в который входят микро задачи и макро задачи. Пример: одноядерные процессора, которые выполняют задачи поочереди. Для пользователя, который запускает несколько приложений этот процесс выглядет так, как будто бы процессор обрабатывает все сразу и одновременно. Но на самом деле задачи каждой программы выполняются поочереди и с определенным приоритетом. Программа, окно которой сейчас открыто (активно) имеет приоритет. Так и JS имеет цикл выполнения, но для программиста это выглядет, как "параллельный" процесс. Дело в том, что в такой формулировке проще разобраться в работе await и асинхронности (само понятие асинхронность говорит о параллельном выполнении), чем вводить формулировку цикла learn.javascript.ru/event-loop. Но думаю, я еще сделать о этой теме отдельный ролик. У вас очень хорошее замечание. Надеюсь интересующиеся зрители прочитают эту ветку комментариев. Спасибо вам :)
Спасибо большое за видео😊очень помогло, очень крутое видео!
Спасибо за Ваш комментарий)) Рад, что видео Вам помогло, надеюсь и другие видео будут Вам интересны 😊Прошу прощения за долгое ожидание ответа
Спасибо за шикарное видео)
как альтернатива, new URLSearchParams(window.location.search) может быть new URL(window.location.href) и тогда код чуть изменится
const URLData = new URL(window.location.href);
const postId = URLData.searchParams.get("post_id");
const data = await getPost(postId)
Принцип в общем смысле тот же)
В любом случае Ваш контент довольно уникальный в практическом применении. Подход "от теории к приближенной к реальности практике" как по мне это именно то, что нужно новичкам, которые должны понимать для чего нужен тот или иной инструмент. И именно такой материал усваивается лучше)
Спасибо вам за такое комментарий :) Да, конечно можно использовать приведенный вами пример :) Спасибо за него и за такой отзыв. Постарался на визуальном примере показать то, что самому было не просто понять. Вообще тема асинхронности не простая, особенно, когда идет речь о большом количестве связей и взаимодействий. Спасибо за ваше сообщение :)
@@alex_dudukalo А вам за урок спасибо. Было бы здорово если бы вы записали уроки по фреймворкам типа React или vue) Сам пока думаю как раз над изучением данного контента,:)
Очень классно!!! СПАСИБО❤
Спасибо за отзыв. Я рад, что видео вам понравилось :)
Отличное объяснение! Лови лайкос!
Спасибо 🤗 ваша поддержка очень вдохновляет🔥
Крутой куратор!
Информация полезная, советую к просмотру.
Александр у меня к вам предложение сделать разбор слайдера на чистом javascript.
Спасибо, надеюсь видео соберет кучу просмотров))
Да, хочется простенький слайдер показать ) Думаю в начале января сделаю )
Прошу прощения. Старайтесь пожалуйста записать видео без эхо через колонки нереально слушать. Не воспринимайте как негатив, мне ваш канал нравится и хочу смотреть ваши видео.
Спасибо за ваше замечание. Я с вами полностью согласен. В момент записи этого видео я записывал со встроенного микрофона, со звуком есть проблемы. Сейчас я использую хороший микрофон, но еще учусь работать со звуком. Надеюсь, скоро смогу это доработать до лучшего звучания. Совсем не обижаюсь. Вы сделали очень корректное замечание :) Спасибо.
@@alex_dudukalo 💛💛💛
Саня станет топом на ютубе
Саша, ты ЮВЕЛИР. Что бы я без тебя делал
:D ))))
Отличный урок! Но не понял смысл type=module. Разве без него не будет работать, async\await ? Уже проверил))) не будет.) забавно.
Спасибо за комментарий :) да, если вы попытаетесь использовать await не внутри асинхронной функции а сразу в глобальной области видимости, ты вы получите ошибку. Придется сделать файл модулем :) или поместить код в асинхронную функцию
разве параллельно выполняются синхр и асинхр функции ? асинхронные функции попадают в event loop не ????
огромное спасибо
Синхронно(по очереди) это весь код последовательно(новый не выполняется пока не закончится предыдущий), асинхронно (без очереди) код выполняется во время вызова не ждет пока основной код выполнится. Вот и всё, не благодарите.😊
Отличные объяснения! Все по полкам. Вот только почему-то у меня выдается ошибка, связанная с политикой CORS. Видимо у вас волшебный live Server! Я же пытался в браузере просматривать результаты кода по вашему уроку. Не выходит.
Александр, спасибо вам. Когда вторая часть ?
Здравствуйте, спасибо за просмотр. Я решил это видео записать одной частью. Вы имеете введу добавление комментариев в приложение блога?
@@alex_dudukalo да, сделал комментарии, стало интересно как вы это реализовали. Думал вторая часть будет про них)
Очень понравилось. Только я бы еще про модули рассказал по-подробнее, а то не понятно, зачем это указывать. Кстати, Александр, а Вы из какого города?
Спасибо за комментарий. Я рад, что понравилось. Мне кажется стал получаться лучше)) Да, тема модулей обязательно будет в другом видео. Ее нужно подробно раскрыть с интересным примером :) Сейчас нахожусь в Москве ) Не всегда получается быстро отвечать :(
Без Лайв сервера выдавало ошибку.
Как я понял, type="module" работает только при использовании сервера.
топчик!
Спасибо 🔥 оставайтесь на канале 🤗
комментарий авансом)
Спасибо за ваш комментарий) Надеюсь видео было интересным )
топ
Спасибо :)
По-моему этот урок недооценён - 6 тыс. просмотров для такого хорошего урока это мало
Спасибо за ваш комментарий🤗 ваша поддержка очень важна
Первая часть про асинхронные функции очень понятная, попробовала, как работает и все получается. А вот со второй частью у меня возникли сложности. Запрос fetch выполняется, если его набрать в консоли и показывает полученные данные во вкладке "сеть". Но если сделать файлы, как у вас в уроке, но на первую же строчку с fetch мне в консоли выдало: "Access to script at '(путь к файлу)' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.". В чем может быть проблема?
О, все разобралась, надо было оказывается, через liveserver запускать, так все сработало! Спасибо, очень интересно и понятно!
@@mariannaorlova1761 такая же фигня возникла :)) только через liveserver запустил.
Прошу прощения за долгий ответ :) Да, вижу уже комментировать не актуально :) Забыл сказать об этом в комментариях. Желательно сайт запускать в режиме сервера)
Так в начале видео автор запускает лайв-сервер. Понятно, что нужно работать через него и видеть результат в браузере. Или я что-то не так понял?
асинхронный код НЕ выполняется "параллельно", он выполняется в порядке очереди, просто его из этой очереди временно убирают и ставят обратно когда происходит определенное событие и стек задач пустой
Да, 500 ый лайк мой!!!
Спасибо большое за поддержку 😍
Так они получается не параллельно выполняются, а асинхронная функция останавливает синхронную пока выполняется сама?
По умолчанию обычные функции выполняются последовательно. Друг за другом. Асинхронные функции выполняются параллельно. Но, если при вызове асинхронной функции дописать await, то весь код будет ждать, пока выполнится эта асинхронная функция. Надеюсь я вас не запутал :)
@@alex_dudukalo досмотрю до конца, тогда будет видно, есть ли связь между полушариями) потом напишу
@@alex_dudukalo кстати, в настройках редактора кода можно поставить галочку и будет авто сохранение, и не надо помнить о нём)) я поставил галочку и все🤷♂️
@@asgard1428 интересно будет узнать мнение )
@@asgard1428 я пробовал ) но через время убрал :) мне не всегда бывает нужно его использовать, но может я вернусь к этому)) спасибо
ОЧЕНЬ МНОГО ВОДЫ
9:37 я ставлю await перед асинхронной функцией и получаю ошибку о том, что await можно писать только внутри асинхронной функции.
Кажется вы не сделали type="module" при подключении js файла :)
@@alex_dudukalo сделал )
@@rtyomKrupskiy странно, что не срабатывает. Без кода, трудно подсказать :(
@@alex_dudukalo в любом случае спасибо!
Афтор маладетс!!!
Спасибо за ваш комментарий и поддержку )