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

  Переглядів 30,767

Василий Муравьев

Василий Муравьев

3 роки тому

Мой 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

КОМЕНТАРІ: 96
@foumRU
@foumRU Рік тому
Посмотрел несколько видео про Promise, но ваши примеры просто нереально крутые, - сразу всё понятно, реальная практика с очень понятными данными. Огромное спасибо!
@stackdev
@stackdev Рік тому
Спасибо за поддержку!
@muhomor1987
@muhomor1987 9 місяців тому
@galievramil1169
@galievramil1169 2 роки тому
Мне очень нравится канал, реальный разраб без понтов обьясняет
@stackdev
@stackdev 2 роки тому
Спасибо!
@galichandreyschool
@galichandreyschool Рік тому
Какой замечательный контент! На реальных примерах без воды объясняете материал! Очень помогает изучить более детально и закрепить материал! Благодарю Вас! Успехов Вам в Вашей полезной и благородной деятельности! 😀
@stackdev
@stackdev Рік тому
Спасибо!
@annashirinskaya7400
@annashirinskaya7400 Рік тому
Отличное видео, и что очень ценно, что с реальными практическими примерами! Очень понятно объясняете, спасибо!
@stackdev
@stackdev Рік тому
Спасибо!
@user-it9vi5gm9q
@user-it9vi5gm9q 3 роки тому
Спасибо за контент, хорошая подача материала особенно примеры! также понравилось что вы приводите старый синтаксис, ждем от вас так же рассказ об итераторах, генераторах и многом другом
@stackdev
@stackdev 3 роки тому
Спасибо! будем работать:)
@WorldCitizen1984
@WorldCitizen1984 Рік тому
Отличная подача! Как для меня новичка - идеально все показано! + примеры с доступный пониманием! Посмотрель 3и лекции по промисам - Ваша лучшая! Спасибо!
@stackdev
@stackdev Рік тому
Спасибо!
@alexforos5425
@alexforos5425 2 роки тому
Спасибо за видео. Отличные примеры! Наконец-то я понял как использовать Promise!
@artemsergeev4833
@artemsergeev4833 Рік тому
Отличная работа, наконец нашел видео с примерами работы с API и получения из них данных
@PieceOfInternet
@PieceOfInternet 11 місяців тому
Спасибо, как всегда замечательная и простая для понимания подача материала! Спасибо и удачи тебе)
@stackdev
@stackdev 11 місяців тому
Спасибо за поддержку!
@vo_skor
@vo_skor 2 роки тому
Очень доходчивые видео, спасибо за ваш труд!)
@stackdev
@stackdev 2 роки тому
Спасибо!
@user-vj3hk5es7b
@user-vj3hk5es7b 7 місяців тому
Хорош бродяга! Четко по делу и ясно , без соплей от Минина.
@stackdev
@stackdev 7 місяців тому
Спасибо!
@zakarhappy5496
@zakarhappy5496 Рік тому
Я наконец-то начинаю понимать промисы, и в большинстве благодаря тебе, спасибо огромное и успехов тебе!
@stackdev
@stackdev Рік тому
Спасибо!
@Rhythm_Men
@Rhythm_Men Рік тому
Очень круто.Спасибо.Успехов каналу и продвижения.
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 роки тому
Интересные примеры. Спасибо
@igorshved2224
@igorshved2224 2 роки тому
Отличные видео, очень доходчиво и понятно все объясняется, всем рекомендую
@stackdev
@stackdev 2 роки тому
Спасибо большое!
@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)
@user-eg4gt7zc8o
@user-eg4gt7zc8o 2 роки тому
Спасибо Вам большое, вы просто лучший! Пожалуйста продолжайте )))
@stackdev
@stackdev 2 роки тому
Спасибо!
@GreekkAlex
@GreekkAlex 2 роки тому
и что, вам сразу стало понятно что внутрь конструктора промиса передается функция, которая получает два коллбэка(резолв и режект)??)))
@vaspurakavdalian1133
@vaspurakavdalian1133 Рік тому
Я просто в восторге от его уроков.Молодец ВАСИЛИЙ
@stackdev
@stackdev Рік тому
Спасибо!
@vaspurakavdalian1133
@vaspurakavdalian1133 Рік тому
@@stackdev Василий подскажите позжалуйста,как найти работу?Например вот я с другом изучаем с сентября месяца html,css и javascript в процесе.(вот вы меня и обучаете :). )Так или иначе разбераемся,есть собственные вёрстки сайтов,без переписи с интернета.Как вы думаете,есть кое какие мелкие проекты ,чем бы и мы могли подработать???как найти?
@vaspurakavdalian1133
@vaspurakavdalian1133 Рік тому
@@stackdev Благодарю вас за понимание
@vaspurakavdalian1133
@vaspurakavdalian1133 Рік тому
Честно говоря,в этот данный момент я смотрю ваши ролики :) 😀 Вы гений.
@stackdev
@stackdev Рік тому
​@@vaspurakavdalian1133 Мелкие подработки это грустно с точки зрения денег и нестабильно. Изучать нужно основательно те вещи, которые используются в корпоративном секторе + желательно во всем мире.... Тогда проблем с работой и деньгами не будет)
@SerhiiParkhomenkoFingerstyle
@SerhiiParkhomenkoFingerstyle Рік тому
Отличный урок! Спасибо!
@kennymccormick9103
@kennymccormick9103 3 місяці тому
Большое спасибо!
@user-uf8nw6uc9z
@user-uf8nw6uc9z Рік тому
замечательная подача материала! автору жму руку
@stackdev
@stackdev Рік тому
Спасибо!
@user-gn5rr6rt1r
@user-gn5rr6rt1r 3 роки тому
очень не плохо, достаточно полезный материал, спасибо
@stackdev
@stackdev 3 роки тому
Спасибо!
@thedvlpr
@thedvlpr 3 роки тому
Контент 🔥 спасибо большое!!
@stackdev
@stackdev 3 роки тому
Спасибо за отзыв!
@maximkorolev7343
@maximkorolev7343 5 місяців тому
Лучший!
@diver1668
@diver1668 Рік тому
Спасибо. Всё очень доходчиво.
@stackdev
@stackdev Рік тому
Спасибо!
@scvorec77
@scvorec77 Рік тому
классное объяснение по асинхру Promise спасибо огромное.. ))
@stackdev
@stackdev Рік тому
Спасибо!
@user-ry9ic6lt9h
@user-ry9ic6lt9h 2 роки тому
очень круто объяснено!
@stackdev
@stackdev 2 роки тому
Спасибо!
@dimkagera6955
@dimkagera6955 7 місяців тому
Нифига се, вот это круто )
@ioannhide3355
@ioannhide3355 Рік тому
Вот сидишь смотришь на говно с миллионом просмотров, где говорят: давайте представим что получаем данные с сервера! И пихают в промис переменные, таймауты и ни одного рабочего примера!!! И тут ютуб подбирает видео где мало просмотров но так все по настоящему и понятно! Василий спасибо! Отличные примеры. Ведь для проектов именно работа с API а не с таймаутами или 1+1)))
@stackdev
@stackdev Рік тому
Спасибо!
@RedShucov
@RedShucov 9 місяців тому
согласен, автору плюс
@user-ic9hf3ps4z
@user-ic9hf3ps4z Рік тому
Спасибо огромное. Очень полезно!!!
@stackdev
@stackdev Рік тому
Спасибо!
@ooldstar
@ooldstar Рік тому
Отлично умеете обьяснять!
@stackdev
@stackdev Рік тому
Спасибо!
@StorySieva
@StorySieva 2 роки тому
Спасибо!
@user-mm3xq9kx2g
@user-mm3xq9kx2g Рік тому
Ну наконецто!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Понял !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Лайк
@Viktorres1
@Viktorres1 Рік тому
Очень полезный урок. Апишка еще не раз пригодится.
@stackdev
@stackdev Рік тому
Спасибо!
@muhafilo4235
@muhafilo4235 4 місяці тому
комментарий для пподдежки и продвижения ролика
@user-ed1jc6xl9r
@user-ed1jc6xl9r Місяць тому
Классное обьяснение, классные примеры, но son выкинет ошибку
@Userffffff
@Userffffff Місяць тому
Жалко, нельзя два лайка поставить:(
@user-gl8qs7qj4k
@user-gl8qs7qj4k Рік тому
А я не понимаю зачем нужен resolve() и его собрат reject()... для чего намеренно завершать промис успешно или неуспешно, если от нас это не зависит... Василий, пожалуйста снимите ролик про этих двух помощников промисов... я просто теряюсь в догадках!
@____Olga__
@____Olga__ 3 роки тому
очень хорошая подача материала, не хуже , чем у человечка , названного в честь Ленина :)
@stackdev
@stackdev 3 роки тому
Спасибо!
@GreekkAlex
@GreekkAlex 2 роки тому
такая же фигня что и у леновлада. не объясняются такие подкапотные дела как, например, при вызове функции getMember, вызывается коструктор промиса? при его возврате или еще как то? как внутри промиса вызываются пустые ссылки на reject, resolve или они автоматом чем то заполняются? автор или сам не знает этих вещей или не договаривает. может это есть на его платных уроках, надеюсь?)))
@43445fgfgd
@43445fgfgd 2 роки тому
@@GreekkAlex каких авторов по JS посоветуешь?
@alexandershcheglov4653
@alexandershcheglov4653 2 роки тому
Спасибо, за урок. Грыз эту тему на MDN было очень тяжко. Я только не совсем понял, как мы в getCoffee меняли coffee на coffee. Мы возвращаем объект в который при помощи spread копируем содержимое объекта нужного члена семьи, и тут же через запятую можно менять свойство?
@stackdev
@stackdev 2 роки тому
Привет! Посмотри мои видео про Spread & Rest
@user-tm9rd
@user-tm9rd 2 роки тому
спасибо за видео! подскажете, пожалуйста, какая это тема vs code?
@stackdev
@stackdev 2 роки тому
Спасибо! Dracula
@fewart
@fewart Рік тому
Подскажите почему response.ok если загружать локально заведомо несуществующий файл? async function fetchSvgData() { const res = await fetch('icon.svg') console.log(res.ok) // true, когда icon.svg не существует }
@masterswift9700
@masterswift9700 3 роки тому
йоу крут чувак
@stackdev
@stackdev 3 роки тому
Спасибо за коммент!
@rustamtau7944
@rustamtau7944 Рік тому
05:40 .then(countries=>countries) Что за конструкция такая? У меня не работает. Работает только .then(countries => {console.log(countries)})
@user-xd6rk7th8b
@user-xd6rk7th8b 2 роки тому
почему промисы это так тяжело для простых людей :( уже 10 видео посмотрела почитала мдн и все равно непонятно как их использовать и что это такое
@stackdev
@stackdev 2 роки тому
Нужно прочитать 1 раз - и 20 раз сделать. И тогда понимание начнет приходить:)
@user-xd6rk7th8b
@user-xd6rk7th8b 2 роки тому
@@stackdev вы правы) просто понимания, что писать нет совсем, расстраиваюсь, что мой мозг не способен осознать промис
@catsapp
@catsapp 2 роки тому
Потому что промис -- это черный ящик, у него нет аналогий. Мы не знаем что происходит под капотом. Нужно выучить как с ним работать на примерах
@user-qj2yg1rn3j
@user-qj2yg1rn3j 2 роки тому
Спасибо, но мало ((
@scvorec77
@scvorec77 Рік тому
не работает sampleapis больше.. не показывает ссылки, открывается только фронтальная страница и все((
@stackdev
@stackdev Рік тому
Странно... у меня работает
@GreekkAlex
@GreekkAlex 2 роки тому
получается внутрь конструктора промиса мы получаем функцию, которая, в свою очередь, получает два коллбэка???!!! это момент надо ж уточнять!! а как будут платные уроки, и такие важные мелочи не будут учтены??!!! facepalm!!
@catsapp
@catsapp 2 роки тому
Я тоже долго думал что такое промис, я понял, что его надо просто простить и принять как данность, таким какой он есть.
@MrRasul121288
@MrRasul121288 Рік тому
Мне кажется,что я никогда не смогу сам такое написать( так все сложно
@faizulla5838
@faizulla5838 2 роки тому
Согласен хорошая подача материала, но если автор не знает чтото, то он тупо об этом помалкивает и идет дальше (в предыдущем ролике было >> и >>> а что это ХЗ товарищ майор, как говориться) ... вот 07:30 вроде new нельзя использовать со стрелочными функциями? или это с другой спецификации №6. Если вообщем, то нельзя было полнее дать применение?... все в кконсол ло в консол лог... а что дальше с ним делать???? все 12 уроков в консол лог... есть пословица" взялся за гуж не говори что не дюж" ... надо дело до ума доводить. представьте такой же урок-курс по электрике... и автор говорит... сегодня у нас домашняя разводка...ну вот 2 провода вышли мы их омметром прозвонили... напругу подали - индикатором протестировали, вот пробник фазу показывает, все вопрос закрыт... в следующем уроке делаем гараж. И что с этими проводами делать??? Жаль мало понимаю, взял курс на инглиш... так там от корки до корки... от А до Я... но не амриканский, а британец... половина пролетает.
@GreekkAlex
@GreekkAlex 2 роки тому
нихера не понятно: resolve, reject - это функции передаваемые в промис? какая из стрелочных функций в создаваемом промисе будет вызываться в качестве resolva, а какая в качестве rejecta. нагромождение стрелочных функций просто ради сокращения строчек кода!! а как же читаемость??!! ушли от callback hell-а, пришли к arrow functions hell-у!!!((((
@circusAnimal_
@circusAnimal_ Рік тому
Простите, конечно, но это вообще не урок по программированию, а поверхностный обзор на 5 мин и далее куча всякого кода с примерами, которые и так можно найти. Кликбейт короче. С таким подходом никакой концепт понять нельзя, тем более такой сложный как промисы.
@ANTON_BERG_MINSK
@ANTON_BERG_MINSK 7 місяців тому
Дааа ну и наглость...
маленький брат прыгает в бассейн
00:15
GL Show Russian
Переглядів 3,6 млн
Разбор Promise и создание собственной имплементации MyPromise | JavaScript
50:05
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 16 тис.
Урок 4. JavaScript. Асинхронность.Что такое Event Loop. JS SetTimeout 0
17:58
Промисы в Javascript
21:55
JS ACADEMY – Влад Грибенников
Переглядів 29 тис.
Что такое Framework простыми словами?
9:51
Sergey Nemchinskiy
Переглядів 179 тис.
Promise, Цепочки промисов (chaining), PromiseAll
47:37
WebDev с нуля. Канал Алекса Лущенко
Переглядів 16 тис.
маленький брат прыгает в бассейн
00:15
GL Show Russian
Переглядів 3,6 млн