Тёмный

ES6 #12. JavaScript Promise. Что это и как работает (+ запросы данных из Coffee API, Beer API и др.) 

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

Мой Telegram: t.me/stackdevru
В этом видео мы разберемся, что такое объекты promise (промисы), которые появились в редакции Javascript ES6. Посмотрим, как они работают и для чего используются.
Обещания (promises) в JavaScript - это новый инструмент для работы с отложенными или асинхронными вычислениями, добавленный в ECMAScript 2015 (6-я версия ECMA-262).
До появления «обещаний» асинхронные задачи можно было решать с помощью функций обратного вызова (т.н. callback функции), которые имели более сложный и неудобный синтаксис.
Плейлист курса ES6: • ES6 - Все Новые Фичи в...
Мы будем запрашивать и обрабатывать различные данные из настоящих API:
1) Countries API - данные о странах
2) Coffee API - виды кофе + ингредиенты
3) Wines API - виды вина + информация
4) Beers API - виды пива + информация
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

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

 

22 янв 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 96   
@foumRU
@foumRU Год назад
Посмотрел несколько видео про Promise, но ваши примеры просто нереально крутые, - сразу всё понятно, реальная практика с очень понятными данными. Огромное спасибо!
@stackdev
@stackdev Год назад
Спасибо за поддержку!
@muhomor1987
@muhomor1987 10 месяцев назад
@galievramil1169
@galievramil1169 2 года назад
Мне очень нравится канал, реальный разраб без понтов обьясняет
@stackdev
@stackdev 2 года назад
Спасибо!
@galichandreyschool
@galichandreyschool Год назад
Какой замечательный контент! На реальных примерах без воды объясняете материал! Очень помогает изучить более детально и закрепить материал! Благодарю Вас! Успехов Вам в Вашей полезной и благородной деятельности! 😀
@stackdev
@stackdev Год назад
Спасибо!
@alexforos5425
@alexforos5425 2 года назад
Спасибо за видео. Отличные примеры! Наконец-то я понял как использовать Promise!
@user-it9vi5gm9q
@user-it9vi5gm9q 3 года назад
Спасибо за контент, хорошая подача материала особенно примеры! также понравилось что вы приводите старый синтаксис, ждем от вас так же рассказ об итераторах, генераторах и многом другом
@stackdev
@stackdev 3 года назад
Спасибо! будем работать:)
@artemsergeev4833
@artemsergeev4833 Год назад
Отличная работа, наконец нашел видео с примерами работы с API и получения из них данных
@kennymccormick9103
@kennymccormick9103 3 месяца назад
Большое спасибо!
@vo_skor
@vo_skor 2 года назад
Очень доходчивые видео, спасибо за ваш труд!)
@stackdev
@stackdev 2 года назад
Спасибо!
@maximkorolev7343
@maximkorolev7343 5 месяцев назад
Лучший!
@Rhythm_Men
@Rhythm_Men Год назад
Очень круто.Спасибо.Успехов каналу и продвижения.
@annashirinskaya7400
@annashirinskaya7400 Год назад
Отличное видео, и что очень ценно, что с реальными практическими примерами! Очень понятно объясняете, спасибо!
@stackdev
@stackdev Год назад
Спасибо!
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 года назад
Интересные примеры. Спасибо
@SerhiiParkhomenkoFingerstyle
Отличный урок! Спасибо!
@zakarhappy5496
@zakarhappy5496 Год назад
Я наконец-то начинаю понимать промисы, и в большинстве благодаря тебе, спасибо огромное и успехов тебе!
@stackdev
@stackdev Год назад
Спасибо!
@PieceOfInternet
@PieceOfInternet Год назад
Спасибо, как всегда замечательная и простая для понимания подача материала! Спасибо и удачи тебе)
@stackdev
@stackdev Год назад
Спасибо за поддержку!
@WorldCitizen1984
@WorldCitizen1984 Год назад
Отличная подача! Как для меня новичка - идеально все показано! + примеры с доступный пониманием! Посмотрель 3и лекции по промисам - Ваша лучшая! Спасибо!
@stackdev
@stackdev Год назад
Спасибо!
@user-vj3hk5es7b
@user-vj3hk5es7b 7 месяцев назад
Хорош бродяга! Четко по делу и ясно , без соплей от Минина.
@stackdev
@stackdev 7 месяцев назад
Спасибо!
@igorshved2224
@igorshved2224 2 года назад
Отличные видео, очень доходчиво и понятно все объясняется, всем рекомендую
@stackdev
@stackdev 2 года назад
Спасибо большое!
@ioannhide3355
@ioannhide3355 Год назад
Вот сидишь смотришь на говно с миллионом просмотров, где говорят: давайте представим что получаем данные с сервера! И пихают в промис переменные, таймауты и ни одного рабочего примера!!! И тут ютуб подбирает видео где мало просмотров но так все по настоящему и понятно! Василий спасибо! Отличные примеры. Ведь для проектов именно работа с API а не с таймаутами или 1+1)))
@stackdev
@stackdev Год назад
Спасибо!
@RedShucov
@RedShucov 10 месяцев назад
согласен, автору плюс
@scvorec77
@scvorec77 Год назад
классное объяснение по асинхру Promise спасибо огромное.. ))
@stackdev
@stackdev Год назад
Спасибо!
@diver1668
@diver1668 Год назад
Спасибо. Всё очень доходчиво.
@stackdev
@stackdev Год назад
Спасибо!
@user-uf8nw6uc9z
@user-uf8nw6uc9z Год назад
замечательная подача материала! автору жму руку
@stackdev
@stackdev Год назад
Спасибо!
@user-eg4gt7zc8o
@user-eg4gt7zc8o 2 года назад
Спасибо Вам большое, вы просто лучший! Пожалуйста продолжайте )))
@stackdev
@stackdev 2 года назад
Спасибо!
@GreekkAlex
@GreekkAlex 2 года назад
и что, вам сразу стало понятно что внутрь конструктора промиса передается функция, которая получает два коллбэка(резолв и режект)??)))
@ooldstar
@ooldstar Год назад
Отлично умеете обьяснять!
@stackdev
@stackdev Год назад
Спасибо!
@user-ic9hf3ps4z
@user-ic9hf3ps4z 2 года назад
Спасибо огромное. Очень полезно!!!
@stackdev
@stackdev 2 года назад
Спасибо!
@thedvlpr
@thedvlpr 3 года назад
Контент 🔥 спасибо большое!!
@stackdev
@stackdev 3 года назад
Спасибо за отзыв!
@user-gn5rr6rt1r
@user-gn5rr6rt1r 3 года назад
очень не плохо, достаточно полезный материал, спасибо
@stackdev
@stackdev 3 года назад
Спасибо!
@user-ry9ic6lt9h
@user-ry9ic6lt9h 2 года назад
очень круто объяснено!
@stackdev
@stackdev 2 года назад
Спасибо!
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Я просто в восторге от его уроков.Молодец ВАСИЛИЙ
@stackdev
@stackdev Год назад
Спасибо!
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
@@stackdev Василий подскажите позжалуйста,как найти работу?Например вот я с другом изучаем с сентября месяца html,css и javascript в процесе.(вот вы меня и обучаете :). )Так или иначе разбераемся,есть собственные вёрстки сайтов,без переписи с интернета.Как вы думаете,есть кое какие мелкие проекты ,чем бы и мы могли подработать???как найти?
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
@@stackdev Благодарю вас за понимание
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Честно говоря,в этот данный момент я смотрю ваши ролики :) 😀 Вы гений.
@stackdev
@stackdev Год назад
​@@vaspurakavdalian1133 Мелкие подработки это грустно с точки зрения денег и нестабильно. Изучать нужно основательно те вещи, которые используются в корпоративном секторе + желательно во всем мире.... Тогда проблем с работой и деньгами не будет)
@dimkagera6955
@dimkagera6955 8 месяцев назад
Нифига се, вот это круто )
@user-tc6pi1nc2r
@user-tc6pi1nc2r Год назад
From my point of view he is one of the best russian speaking js's coach
@stackdev
@stackdev Год назад
Thanx a lot)
@muhafilo4235
@muhafilo4235 5 месяцев назад
комментарий для пподдежки и продвижения ролика
@StorySieva
@StorySieva 2 года назад
Спасибо!
@Viktorres1
@Viktorres1 Год назад
Очень полезный урок. Апишка еще не раз пригодится.
@stackdev
@stackdev Год назад
Спасибо!
@alexandershcheglov4653
@alexandershcheglov4653 3 года назад
Спасибо, за урок. Грыз эту тему на MDN было очень тяжко. Я только не совсем понял, как мы в getCoffee меняли coffee на coffee. Мы возвращаем объект в который при помощи spread копируем содержимое объекта нужного члена семьи, и тут же через запятую можно менять свойство?
@stackdev
@stackdev 3 года назад
Привет! Посмотри мои видео про Spread & Rest
@user-mm3xq9kx2g
@user-mm3xq9kx2g Год назад
Ну наконецто!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Понял !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Лайк
@fewart
@fewart Год назад
Подскажите почему response.ok если загружать локально заведомо несуществующий файл? async function fetchSvgData() { const res = await fetch('icon.svg') console.log(res.ok) // true, когда icon.svg не существует }
@Userffffff
@Userffffff 2 месяца назад
Жалко, нельзя два лайка поставить:(
@user-tm9rd
@user-tm9rd 2 года назад
спасибо за видео! подскажете, пожалуйста, какая это тема vs code?
@stackdev
@stackdev 2 года назад
Спасибо! Dracula
@user-ed1jc6xl9r
@user-ed1jc6xl9r 2 месяца назад
Классное обьяснение, классные примеры, но son выкинет ошибку
@user-xd6rk7th8b
@user-xd6rk7th8b 2 года назад
почему промисы это так тяжело для простых людей :( уже 10 видео посмотрела почитала мдн и все равно непонятно как их использовать и что это такое
@stackdev
@stackdev 2 года назад
Нужно прочитать 1 раз - и 20 раз сделать. И тогда понимание начнет приходить:)
@user-xd6rk7th8b
@user-xd6rk7th8b 2 года назад
@@stackdev вы правы) просто понимания, что писать нет совсем, расстраиваюсь, что мой мозг не способен осознать промис
@catsapp
@catsapp 2 года назад
Потому что промис -- это черный ящик, у него нет аналогий. Мы не знаем что происходит под капотом. Нужно выучить как с ним работать на примерах
@user-gl8qs7qj4k
@user-gl8qs7qj4k Год назад
А я не понимаю зачем нужен resolve() и его собрат reject()... для чего намеренно завершать промис успешно или неуспешно, если от нас это не зависит... Василий, пожалуйста снимите ролик про этих двух помощников промисов... я просто теряюсь в догадках!
@rustamtau7944
@rustamtau7944 Год назад
05:40 .then(countries=>countries) Что за конструкция такая? У меня не работает. Работает только .then(countries => {console.log(countries)})
@____Olga__
@____Olga__ 3 года назад
очень хорошая подача материала, не хуже , чем у человечка , названного в честь Ленина :)
@stackdev
@stackdev 3 года назад
Спасибо!
@GreekkAlex
@GreekkAlex 2 года назад
такая же фигня что и у леновлада. не объясняются такие подкапотные дела как, например, при вызове функции getMember, вызывается коструктор промиса? при его возврате или еще как то? как внутри промиса вызываются пустые ссылки на reject, resolve или они автоматом чем то заполняются? автор или сам не знает этих вещей или не договаривает. может это есть на его платных уроках, надеюсь?)))
@43445fgfgd
@43445fgfgd 2 года назад
@@GreekkAlex каких авторов по JS посоветуешь?
@masterswift9700
@masterswift9700 3 года назад
йоу крут чувак
@stackdev
@stackdev 3 года назад
Спасибо за коммент!
@user-qj2yg1rn3j
@user-qj2yg1rn3j 2 года назад
Спасибо, но мало ((
@scvorec77
@scvorec77 Год назад
не работает sampleapis больше.. не показывает ссылки, открывается только фронтальная страница и все((
@stackdev
@stackdev Год назад
Странно... у меня работает
@MrRasul121288
@MrRasul121288 Год назад
Мне кажется,что я никогда не смогу сам такое написать( так все сложно
@GreekkAlex
@GreekkAlex 2 года назад
получается внутрь конструктора промиса мы получаем функцию, которая, в свою очередь, получает два коллбэка???!!! это момент надо ж уточнять!! а как будут платные уроки, и такие важные мелочи не будут учтены??!!! facepalm!!
@catsapp
@catsapp 2 года назад
Я тоже долго думал что такое промис, я понял, что его надо просто простить и принять как данность, таким какой он есть.
@GreekkAlex
@GreekkAlex 2 года назад
нихера не понятно: resolve, reject - это функции передаваемые в промис? какая из стрелочных функций в создаваемом промисе будет вызываться в качестве resolva, а какая в качестве rejecta. нагромождение стрелочных функций просто ради сокращения строчек кода!! а как же читаемость??!! ушли от callback hell-а, пришли к arrow functions hell-у!!!((((
@faizulla5838
@faizulla5838 2 года назад
Согласен хорошая подача материала, но если автор не знает чтото, то он тупо об этом помалкивает и идет дальше (в предыдущем ролике было >> и >>> а что это ХЗ товарищ майор, как говориться) ... вот 07:30 вроде new нельзя использовать со стрелочными функциями? или это с другой спецификации №6. Если вообщем, то нельзя было полнее дать применение?... все в кконсол ло в консол лог... а что дальше с ним делать???? все 12 уроков в консол лог... есть пословица" взялся за гуж не говори что не дюж" ... надо дело до ума доводить. представьте такой же урок-курс по электрике... и автор говорит... сегодня у нас домашняя разводка...ну вот 2 провода вышли мы их омметром прозвонили... напругу подали - индикатором протестировали, вот пробник фазу показывает, все вопрос закрыт... в следующем уроке делаем гараж. И что с этими проводами делать??? Жаль мало понимаю, взял курс на инглиш... так там от корки до корки... от А до Я... но не амриканский, а британец... половина пролетает.
@circusAnimal_
@circusAnimal_ Год назад
Простите, конечно, но это вообще не урок по программированию, а поверхностный обзор на 5 мин и далее куча всякого кода с примерами, которые и так можно найти. Кликбейт короче. С таким подходом никакой концепт понять нельзя, тем более такой сложный как промисы.
@ANTON_BERG_MINSK
@ANTON_BERG_MINSK 7 месяцев назад
Дааа ну и наглость...
Далее
skibidi toilet 74
07:02
Просмотров 20 млн
skibidi toilet 74
07:02
Просмотров 20 млн