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

Поделиться
HTML-код
  • Опубликовано: 7 фев 2022
  • 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

Комментарии • 74

  • @gritsienkooleg3447
    @gritsienkooleg3447 2 года назад +28

    Те, кто попали на этот канал, - просто везунчики, т.к. сэкономили кучу времени на понимании ) Доносите информацию как для своих детей ))

    • @stackdev
      @stackdev  2 года назад

      :) Спасибо!

    • @Albert_Hall
      @Albert_Hall Год назад +3

      :))) абсолютно солидарен

  • @galichandreyschool
    @galichandreyschool Год назад +12

    Вы - талантливый преподаватель! Всё доходчиво, без воды! Успехов Вам в Вашей деятельности! 😀

  • @user-vk5ls2xy5x
    @user-vk5ls2xy5x Год назад +2

    @stackdev утром пытался разобраться в этой теме. Отложил, потому что понял, что в ближайшее время не смогу осилить. А сейчас, вечером, посмотрел ваше видео и понял всё с первого раза! Ваш контент самый идеальный для новичков!!! Спасибо вам большое)))

  • @maximtantsura7249
    @maximtantsura7249 2 года назад +1

    То, чего я ждал 👍🏻
    Спасибо, Василий!

  • @Albert_Hall
    @Albert_Hall Год назад +2

    Считаю ваши видосы одними из лучших в Рунете. 🚀🌠

  • @Albert_Hall
    @Albert_Hall Год назад +3

    Присоединяюсь ко всем восторженным комментам в адрес канала и лично его автора Василия.
    Очень приятно слушать. Очень хорошие примеры. Очень прозрачная и ясная подача.

    • @stackdev
      @stackdev  Год назад

      Спасибо большое!

  • @vladimirpuzey713
    @vladimirpuzey713 2 года назад +14

    Огромное спасибо за видео, супер-доходчиво! Белых пятен становится меньше)
    P.s. идея для следующего видео этого курса - геттеры-сеттры, приватные свойства объекта.

  • @user-ch9qk3ee5n
    @user-ch9qk3ee5n 2 года назад +3

    супер! Ваше объяснение просто шикарное! У Вас талант) а примеры использования вообще как отдельный вид искусства!!!СПАСИБО)

    • @stackdev
      @stackdev  2 года назад

      Спасибо большое!

  • @dr_morpho
    @dr_morpho 2 года назад +1

    Спасибо вам! Все круто, начал толком разбираться)

  • @gregdmitriev2784
    @gregdmitriev2784 Год назад +2

    вот прям то, что доктор прописал ! дякую, сенсей 🙏👍

  • @kindaart7451
    @kindaart7451 Год назад +2

    Бесценный материал, большое вам спасибо за то, что делитесь знаниями и так доступно их преподносите!

  • @katerinatereshchenko
    @katerinatereshchenko Год назад +2

    Благодарю за доходчивые примеры! 🙂

  • @karoche-tv
    @karoche-tv 2 года назад +4

    У вас очень понятные уроки спасибо большое за уроки

  • @sergkuznetzov3469
    @sergkuznetzov3469 2 года назад +1

    Спасибо Василий!Успехов твоему классному каналу.

  • @a.6lockprod.901
    @a.6lockprod.901 Год назад +1

    Благорю Вас, за Ваш труд! Очень хороший контент!)

  • @sergdonskikh2140
    @sergdonskikh2140 2 года назад +1

    Василий , благодарю !

  • @zmark2274
    @zmark2274 7 месяцев назад

    Спасибо автору. Очень познавательно и доходчиво

  • @XyuTe6eHaBopoTHuK
    @XyuTe6eHaBopoTHuK Год назад +1

    плейлист посмотрен) спасибо!

  • @romanvinogradovby
    @romanvinogradovby 2 года назад +4

    Василий, спасибо за туториал. Посмотрел с телефона, позже повторю с ноута с набором кода. На мой взгляд так лучше уложится в голове. Хотя и к такому методу обучения по роликам с ютуба есть вопросы. Пока не тяну, чтобы написать свой проект

  • @aaaaaa-bl2it
    @aaaaaa-bl2it 7 месяцев назад +1

    Жирнющий лайк и огромное спасибо.

    • @stackdev
      @stackdev  7 месяцев назад

      Спасибо!

  • @imdanteasy
    @imdanteasy 11 месяцев назад +1

    Благодарю! Очень хорошо объясняете

    • @stackdev
      @stackdev  11 месяцев назад

      Спасибо!

  • @galievramil1169
    @galievramil1169 2 года назад +1

    Отличное Видео, хороший туториал, все основы есть

  • @NailIsmailov
    @NailIsmailov 2 года назад +1

    Хороший контент. Спасибо за видео

    • @stackdev
      @stackdev  2 года назад +1

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

  • @Burbon211
    @Burbon211 Год назад +1

    Блин чувак ты круто объясняешь, даже до меня дошло!

  • @magbear3205
    @magbear3205 2 года назад +2

    рад что нашел тебя)))
    Ты объясняешь всё доступным языком. Сразу видно что говорит человек познавший истину)))
    Сделай курс по JS и React. Обязательно куплю

    • @stackdev
      @stackdev  2 года назад +1

      Спасибо! работаю над этим:)

    • @magbear3205
      @magbear3205 2 года назад +1

      @@stackdev будем ждать))

  • @vitalijslavrinovics8756
    @vitalijslavrinovics8756 7 месяцев назад

    Такое ощущение у меня при просмотре данного видео, что вы много Php занимались. :)

  • @ekuzovlev
    @ekuzovlev 2 года назад +1

    Помню как первый раз попался на асинхронности в JS. )) Спасибо за видео, отлично объяснили!

  • @user-lm9ee1gn5p
    @user-lm9ee1gn5p Год назад +1

    Спасибо вам огромное

  • @user-nj6ls2fq9f
    @user-nj6ls2fq9f 5 месяцев назад +1

    у меня сегодня на собезе !ТЕХ ЛИД ФРОНТ ЕНД! была задача о sleep

  • @user-gz1qc5tj9y
    @user-gz1qc5tj9y 2 года назад +1

    Спасибо!

  • @sleepstream9433
    @sleepstream9433 Год назад

    очень круто получить undefined и не получить исключение (сарказм), использовать это надо полноценно подумав о последствиях.

  • @denystry
    @denystry 2 года назад +1

    очень круто

  • @SteamStyle
    @SteamStyle Год назад

    пора видео делать как сделать Бота для ВК или Телеграм , как раз практика будет

  • @velikorossnationalist4259
    @velikorossnationalist4259 2 года назад +1

    Почему у меня всегда при вызове асинхронной функции выходит промис в ожидании(panding), а не как у автора видео сразу все данные (с примером githubа?)

  • @martDKNY
    @martDKNY Год назад

    А почему 24:14, у console.log(), не надо писать await, а у sleep() надо? Почему в console.log(sleep1) не возращается undefind на стадии вызова лога? Это как с alert'ом работает, и если это зависший запрос к серверу, загрузка всего сайта повиснет, или как это работает?

  • @alexandrpushkin389
    @alexandrpushkin389 Год назад

    Привет! Спасибо за видео! Объяснение хорошее, только я не понял, говорим про асинхрон а sleep выполняется синхронно. В чём суть примера?

    • @dilshadmatkulov3318
      @dilshadmatkulov3318 9 месяцев назад

      вся суть в том, чтобы сделать так, чтобы асинхронный код работал как синхронный

  • @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 И все друг за другом

  • @yevhenfodorov121
    @yevhenfodorov121 Год назад

    const data = await response.json(); 18 минута, разве метод json() -не синхронно выполнятеся? почему мы должны писать await в этой строке кода?

  • @brutix80
    @brutix80 Год назад +3

    "Async - await : позволяет писать асинхронный код как обычный синхронный". Просто. Понятно. Без всякой придури типа : "ну это синтаксический саааааахар, епта, че непонятного то.." Примеры просто блеск

  • @AmericanDragon134
    @AmericanDragon134 2 года назад

    React

  • @magbear3205
    @magbear3205 2 года назад

    В чем разница между асинхронно и параллельно?

  • @catsapp
    @catsapp 2 года назад

    Опа коммент стерли!

    • @stackdev
      @stackdev  2 года назад +1

      Мы комментарии не стираем!

    • @catsapp
      @catsapp 2 года назад

      @@stackdev ютуб значит страноо

    • @stackdev
      @stackdev  2 года назад +1

      @@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 Год назад +1

    Спасибо!