Тёмный

#13. JavaScript. Как работает Async, Await, чем отличается от Promise (+ 3 асинхронных примера) 

Василий Муравьев
Подписаться 21 тыс.
Просмотров 29 тыс.
50% 1

Telegram StackDev: t.me/stackdevru
Структура проекта: t.me/stackdevru/39
Урок 13. Javascript. В этом видео мы разберемся как использовать Async Await и обрабатывать возможные ошибки.
Для этого мы рассмотрим 3 примера.
Мы будем использовать метод fetch (для получения данных из внешнего API), метод getUserMedia (для взаимодействия с видео камерой), а также напишем 1 собственный метод (будет также возвращать промис).
Мои Курсы:
React + GatsbyJS: gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

Опубликовано:

 

7 фев 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 74   
@gritsienkooleg3447
@gritsienkooleg3447 2 года назад
Те, кто попали на этот канал, - просто везунчики, т.к. сэкономили кучу времени на понимании ) Доносите информацию как для своих детей ))
@stackdev
@stackdev 2 года назад
:) Спасибо!
@Albert_Hall
@Albert_Hall Год назад
:))) абсолютно солидарен
@galichandreyschool
@galichandreyschool Год назад
Вы - талантливый преподаватель! Всё доходчиво, без воды! Успехов Вам в Вашей деятельности! 😀
@stackdev
@stackdev Год назад
Спасибо!
@user-vk5ls2xy5x
@user-vk5ls2xy5x Год назад
@stackdev утром пытался разобраться в этой теме. Отложил, потому что понял, что в ближайшее время не смогу осилить. А сейчас, вечером, посмотрел ваше видео и понял всё с первого раза! Ваш контент самый идеальный для новичков!!! Спасибо вам большое)))
@stackdev
@stackdev Год назад
Спасибо!
@maximtantsura7249
@maximtantsura7249 2 года назад
То, чего я ждал 👍🏻 Спасибо, Василий!
@Albert_Hall
@Albert_Hall Год назад
Присоединяюсь ко всем восторженным комментам в адрес канала и лично его автора Василия. Очень приятно слушать. Очень хорошие примеры. Очень прозрачная и ясная подача.
@stackdev
@stackdev Год назад
Спасибо большое!
@vladimirpuzey713
@vladimirpuzey713 2 года назад
Огромное спасибо за видео, супер-доходчиво! Белых пятен становится меньше) P.s. идея для следующего видео этого курса - геттеры-сеттры, приватные свойства объекта.
@stackdev
@stackdev 2 года назад
Спасибо!
@Albert_Hall
@Albert_Hall Год назад
Считаю ваши видосы одними из лучших в Рунете. 🚀🌠
@stackdev
@stackdev Год назад
Спасибо!
@dr_morpho
@dr_morpho 2 года назад
Спасибо вам! Все круто, начал толком разбираться)
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Спасибо вам огромное
@romanvinogradovby
@romanvinogradovby 2 года назад
Василий, спасибо за туториал. Посмотрел с телефона, позже повторю с ноута с набором кода. На мой взгляд так лучше уложится в голове. Хотя и к такому методу обучения по роликам с ютуба есть вопросы. Пока не тяну, чтобы написать свой проект
@user-ch9qk3ee5n
@user-ch9qk3ee5n 2 года назад
супер! Ваше объяснение просто шикарное! У Вас талант) а примеры использования вообще как отдельный вид искусства!!!СПАСИБО)
@stackdev
@stackdev 2 года назад
Спасибо большое!
@karoche-tv
@karoche-tv 2 года назад
У вас очень понятные уроки спасибо большое за уроки
@stackdev
@stackdev 2 года назад
Спасибо!
@sergdonskikh2140
@sergdonskikh2140 2 года назад
Василий , благодарю !
@zmark2274
@zmark2274 7 месяцев назад
Спасибо автору. Очень познавательно и доходчиво
@katerinatereshchenko
@katerinatereshchenko Год назад
Благодарю за доходчивые примеры! 🙂
@stackdev
@stackdev Год назад
Спасибо!
@kindaart7451
@kindaart7451 Год назад
Бесценный материал, большое вам спасибо за то, что делитесь знаниями и так доступно их преподносите!
@stackdev
@stackdev Год назад
Спасибо!
@user-vp5hu8om9b5
@user-vp5hu8om9b5 Год назад
плейлист посмотрен) спасибо!
@stackdev
@stackdev Год назад
Спасибо!
@gregdmitriev2784
@gregdmitriev2784 Год назад
вот прям то, что доктор прописал ! дякую, сенсей 🙏👍
@stackdev
@stackdev Год назад
Спасибо!
@sergkuznetzov3469
@sergkuznetzov3469 2 года назад
Спасибо Василий!Успехов твоему классному каналу.
@stackdev
@stackdev 2 года назад
Спасибо!
@a.6lockprod.901
@a.6lockprod.901 Год назад
Благорю Вас, за Ваш труд! Очень хороший контент!)
@stackdev
@stackdev Год назад
Спасибо!
@imdanteasy
@imdanteasy 10 месяцев назад
Благодарю! Очень хорошо объясняете
@stackdev
@stackdev 10 месяцев назад
Спасибо!
@aaaaaa-bl2it
@aaaaaa-bl2it 6 месяцев назад
Жирнющий лайк и огромное спасибо.
@stackdev
@stackdev 6 месяцев назад
Спасибо!
@NailIsmailov
@NailIsmailov 2 года назад
Хороший контент. Спасибо за видео
@stackdev
@stackdev 2 года назад
Спасибо за поддержку!
@galievramil1169
@galievramil1169 2 года назад
Отличное Видео, хороший туториал, все основы есть
@stackdev
@stackdev 2 года назад
Спасибо!
@Burbon211
@Burbon211 Год назад
Блин чувак ты круто объясняешь, даже до меня дошло!
@stackdev
@stackdev Год назад
Спасибо!
@magbear3205
@magbear3205 2 года назад
рад что нашел тебя))) Ты объясняешь всё доступным языком. Сразу видно что говорит человек познавший истину))) Сделай курс по JS и React. Обязательно куплю
@stackdev
@stackdev 2 года назад
Спасибо! работаю над этим:)
@magbear3205
@magbear3205 2 года назад
@@stackdev будем ждать))
@ekuzovlev
@ekuzovlev 2 года назад
Помню как первый раз попался на асинхронности в JS. )) Спасибо за видео, отлично объяснили!
@stackdev
@stackdev 2 года назад
Спасибо!
@velikorossnationalist4259
@velikorossnationalist4259 2 года назад
Почему у меня всегда при вызове асинхронной функции выходит промис в ожидании(panding), а не как у автора видео сразу все данные (с примером githubа?)
@user-gz1qc5tj9y
@user-gz1qc5tj9y 2 года назад
Спасибо!
@user-nj6ls2fq9f
@user-nj6ls2fq9f 4 месяца назад
у меня сегодня на собезе !ТЕХ ЛИД ФРОНТ ЕНД! была задача о sleep
@vitalijslavrinovics8756
@vitalijslavrinovics8756 6 месяцев назад
Такое ощущение у меня при просмотре данного видео, что вы много Php занимались. :)
@denystry
@denystry 2 года назад
очень круто
@stackdev
@stackdev 2 года назад
Спасибо!
@sleepstream9433
@sleepstream9433 Год назад
очень круто получить undefined и не получить исключение (сарказм), использовать это надо полноценно подумав о последствиях.
@yevhenfodorov121
@yevhenfodorov121 Год назад
const data = await response.json(); 18 минута, разве метод json() -не синхронно выполнятеся? почему мы должны писать await в этой строке кода?
@martDKNY
@martDKNY Год назад
А почему 24:14, у console.log(), не надо писать await, а у sleep() надо? Почему в console.log(sleep1) не возращается undefind на стадии вызова лога? Это как с alert'ом работает, и если это зависший запрос к серверу, загрузка всего сайта повиснет, или как это работает?
@alexandrpushkin389
@alexandrpushkin389 Год назад
Привет! Спасибо за видео! Объяснение хорошее, только я не понял, говорим про асинхрон а sleep выполняется синхронно. В чём суть примера?
@dilshadmatkulov3318
@dilshadmatkulov3318 8 месяцев назад
вся суть в том, чтобы сделать так, чтобы асинхронный код работал как синхронный
@pupizoid100
@pupizoid100 Год назад
К сожалению не понял отличие. Функции sleep. При выполнение без async await. Просто например у меня разное время .then((response) => { console.log(response); return sleep(1000); }) .then((res) => { console.log(res); return sleep(5000); }) .then((res) => { console.log(res); return sleep(2000); }) .then((res) => { console.log(res); }) Но функция выполнилась последовательно сначала 1000 потом 5000 и 2000. Тоже самое сделала async await. Тоже ждала и последовательно выводила 4500, 3000, 2000, 6000 И все друг за другом
@magbear3205
@magbear3205 2 года назад
В чем разница между асинхронно и параллельно?
@SteamStyle
@SteamStyle Год назад
пора видео делать как сделать Бота для ВК или Телеграм , как раз практика будет
@brutix80
@brutix80 Год назад
"Async - await : позволяет писать асинхронный код как обычный синхронный". Просто. Понятно. Без всякой придури типа : "ну это синтаксический саааааахар, епта, че непонятного то.." Примеры просто блеск
@AmericanDragon134
@AmericanDragon134 2 года назад
React
@catsapp
@catsapp 2 года назад
Опа коммент стерли!
@stackdev
@stackdev 2 года назад
Мы комментарии не стираем!
@catsapp
@catsapp 2 года назад
@@stackdev ютуб значит страноо
@stackdev
@stackdev 2 года назад
@@catsapp Непонятно.... но я никогда не стираю
@catsapp
@catsapp 2 года назад
@@stackdev Ясно. Алгоритмы трудятся
@IgorNovakus
@IgorNovakus Год назад
Посмотрел видео,и всеравно не могу разобраться. Async await это синтаксический сахар основанный на promise.then().catch,но не могу отследить в каком конкретно месте реализована эта идея.В методе then,создаётся новый промис и вешается обработчик события на выполнения промиса родителя.После регистрации события изменения состояния промиса на родителе, выполняться обработчик,который запускает метод,который получил then(function).После чего результат выполнения function,он передаёт в метод resolve (functionRezult),что меняет состояние промиса созданного в методе then. И в этом основной смысл цеплчки, что метод then возвращает новый промис,основанный на return функции function, переданной в then(function) в качестве аргумента. Что же касается async () = >{ внутренний код}, то он возвращает новый промис.А вот внутренний код,в чем аналогия с цепочкой then,вообще не смогу понять
@IgorNovakus
@IgorNovakus Год назад
Буду рад если объясните не так это зделанно на lern js
@kinomir20
@kinomir20 Год назад
Спасибо!
Далее
Why You Should Always Help Others ❤️
00:40
Просмотров 2,3 млн
HELLUVA BOSS - THE FULL MOON  // S2: Episode 8
23:10
Параметры в ссылках в React Router 6
11:40
Why You Should Always Help Others ❤️
00:40
Просмотров 2,3 млн