background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon

Скачать "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок."

input logo icon
Теги видео
|

Теги видео

html
css
js
javascript
вёрстка
frontend
курс
web
разработка
2023
script
промис
промисы
promise
then
catch
finally
обработка ошибок
цепочка промисов
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:00
Всем привет мы продолжаем с вами
00:00:02
изучение Java скрипта и в этом уроке мы
00:00:04
с Вами рассмотрим тему промесы про Месси
00:00:06
по своей сути у нас представляют удобный
00:00:08
способ организации асинхронного кода для
00:00:10
простоты понимания Давайте с Вами
00:00:12
рассмотрим какой-то жизненный пример
00:00:13
допустим вы находитесь в какой-то
00:00:15
комнате и вы хотели бы сходить на кухню
00:00:17
и достать холодильника еду и Давайте
00:00:19
разобьем весь этот процесс на
00:00:20
определенный этап первый этап это поход
00:00:22
с комнаты на кухню этот процесс занимает
00:00:25
какое-то время дальше когда вы пришли на
00:00:27
кухню Вы должны открыть холодильник
00:00:28
достать еду и соответственно закрыть
00:00:30
холодильник и только потом вы сможете
00:00:32
съесть эту еду каждый из этих этапов
00:00:34
занимает какой-то период времени и
00:00:36
представляет собой цепочку событий и
00:00:38
каждый последующий этап прямо зависит от
00:00:40
предыдущего так вот если мы будем
00:00:42
переноситься в программирование и нам
00:00:44
нужно будет увязать вот эти вот
00:00:46
асинхронные события которые занимает
00:00:47
какой-то промежуток времени нам в этом
00:00:49
замечательно помогает
00:00:51
следующий синтаксис мы создаем с вами
00:00:53
какую-то переменную куда мы будем с вами
00:00:55
присваивать следующую конструкцию мы
00:00:57
создаем новый экземпляр класса
00:01:31
внутри которого мы поместим
00:01:34
безымянную функцию которая выполнится у
00:01:36
нас Через секунду и внутри что мы будем
00:01:39
делать мы с вами возьмем и вызовем
00:01:42
функцию Resort
00:01:44
и также в качестве аргумента мы
00:01:47
передадим какое-то значение кроме своего
00:01:50
полного успешно
00:01:53
сохраним и Давайте немного забегая
00:01:56
наперед Мы у нашего промиса
00:02:01
вызовем метод Z
00:02:03
и внутри данного метода у нас также
00:02:05
будет функция здесь у нас будет дата
00:02:09
и Давайте выведем в конце эту дату
00:02:14
сохраним перейдем браузер и посмотрим
00:02:18
смотрите Через секунду у нас пришло
00:02:21
сообщение про Мисс выполнился успешно
00:02:24
Давайте Вернемся и детально разберем Как
00:02:26
это работает когда мы с вами создаем
00:02:28
новый экземпляр промиса мы Передаем вот
00:02:31
такую вот функцию в которой У нас два
00:02:33
параметра и есть тело функции и данная
00:02:36
функция нас автоматически запускается то
00:02:39
есть соответственно мы переходим к
00:02:40
выполнению данного кода внутри данного
00:02:42
кода У нас есть тайм-аут который у нас
00:02:45
отработает ровно через секунду и когда
00:02:47
он отработает мы вызываем функцию ризот
00:02:50
вот этот функцию мы Достали из параметра
00:02:53
и при вызове внутри аргумента мы
00:02:55
Передаем наше сообщение и соответственно
00:02:57
когда выполняется данная функция мы даем
00:03:00
понять нашему кролису что он у нас
00:03:02
выполнился успешно и дальше уже через
00:03:04
цепочку Мы можем с вами доставать
00:03:07
результат отработки данного
00:03:09
соответственно то что мы сюда с вами
00:03:11
передали цепочку мы сами разберем Чуть
00:03:13
позже я показывает данную строчку кода
00:03:16
чтобы вам было наглядно что вы понимали
00:03:18
что мы с вами перевели кроме с успешно
00:03:20
выполненной и соответственно вытянули
00:03:22
какую-то информацию давайте сейчас
00:03:24
закомментируем эту строчку кода и теперь
00:03:27
будем вызывать реджект
00:03:30
и внутри него мы будем прокидывать
00:03:32
ошибку Мы конечно можем с вами поступать
00:03:35
так же само как срезал Но более
00:03:36
корректно будет выкидывать именно ошибку
00:03:44
и опять же забегая немножко наперед мы с
00:03:47
вами хотим получить это ошибку Давайте
00:03:50
вот здесь вот буду вызывать уже метод
00:03:52
Catch который нам служит для обработки
00:03:55
ошибок
00:03:56
и здесь соответственно Мы хотим с вами
00:03:58
отлавливать эту ошибку
00:04:03
сохраняем обновляем и смотрим Что через
00:04:06
секунду нам пришла ошибка и мы
00:04:09
соответственно ее обработали и вывели
00:04:11
эту информацию
00:04:13
для простоты понимания у нашей
00:04:15
переменной промез есть внутренние
00:04:17
свойства стоит и result так вот в случае
00:04:20
если мы с вами используем функцию резал
00:04:23
у нас стейки будет значение чтобы
00:04:26
обозначать что наш промез успешно
00:04:28
выполнен и врезался соответственно у нас
00:04:30
будет Мы передали вот здесь а в случае
00:04:33
если мы с вами запускаем функцию тогда
00:04:36
внутри свойства кроме будет значение и
00:04:39
врезал соответственно попадает вот это
00:04:41
вот ошибка которую мы сами прокинули то
00:04:44
есть у нас может быть или так Или так мы
00:04:46
с вами не можем запускать одновременно и
00:04:48
ризот или Джек после того как выполнится
00:04:51
одна из этих функций первое все
00:04:53
последующие будут уже игнорироваться это
00:04:55
тоже очень важно понимать на практике
00:04:57
используется и эта функция это функция и
00:05:00
как правило следующим образом если у нас
00:05:02
допустим тут мы попадаем к примеру то у
00:05:06
нас вызывается данная функция Иначе мы с
00:05:10
вами попадаем вот сюда
00:05:12
и соответственно уже у нас здесь
00:05:14
какие-то вычисления происходит выше и в
00:05:17
зависимости от результата вычисления мы
00:05:19
попадаем или туда или туда также на
00:05:22
практике может случиться такая ситуация
00:05:23
когда мы с вами будем запускать допустим
00:05:25
нашу функцию resolve и без сайта
00:05:28
тайм-аута это может происходить случае
00:05:30
который мы с вами разбирали ранее в
00:05:32
уроках в теме декораторы если допустим у
00:05:34
нас есть какой-то декоратор который
00:05:36
обрабатывает информацию и сначала ищет
00:05:38
информацию в кэш а только потом делает
00:05:41
запрос допустим на сервер ТО в случае
00:05:43
если мы с вами нашли в кэше нужно нам
00:05:45
информацию сразу допустим запускать наш
00:05:47
ризов и у нас будет все мгновенно
00:05:50
отрабатывать
00:05:54
это За трем
00:05:57
обновим и посмотрим мы здесь получили
00:05:59
Анды файлы Почему Потому что мы здесь
00:06:01
призов ничего не передали Давайте
00:06:03
передадим три единички и убедимся в том
00:06:06
что мы получили с вами нашу дату Теперь
00:06:08
давайте Вернемся более подробно разберем
00:06:11
наш метод Zen У нашего промиса данный
00:06:13
метод внутри себя принимает в качестве
00:06:15
первого аргумента функцию Где в
00:06:17
параметре мы сможем достать дату которую
00:06:19
мы передали при успешном выполнении
00:06:21
промеса Это первый аргумент и также есть
00:06:24
второй аргумент
00:06:26
и здесь можем с вами принимать ошибки
00:06:29
которые у нас будут в случае если мы с
00:06:32
вами выполним
00:06:34
функцию реджект
00:06:37
Давайте с вами Это сотрем здесь мы
00:06:40
поставим Fall чтобы мы с вами попали в
00:06:42
реджект
00:06:43
обновим и посмотрим
00:06:45
что через секунду мы с вами попали вот
00:06:48
сюда вот и соответственно мы с вами
00:06:50
вывели ошибку и также у нас еще есть
00:06:52
метод Catch Давайте его запишем сразу же
00:06:55
после метода Z
00:06:58
и скопируем сюда внутрь эту функцию он
00:07:02
принимает только один аргумент эта
00:07:05
функция которая будет обрабатывать у нас
00:07:06
ошибки выводить это значение Ну или
00:07:09
впоследствии мы будем как-то его
00:07:10
использовать и прокидывать информацию
00:07:12
дальше Давайте Вот это закомментин и
00:07:15
посмотрим что у нас теперь информация
00:07:17
получается на 18 строке и соответственно
00:07:19
мы на 18 уже обрабатываем нашу ошибку
00:07:22
метод Catch у нас по своей сути является
00:07:24
аналогом 2 аргумента методе Z и на
00:07:28
практике для простоты понимания кода
00:07:30
используется как раз метод Catch нежели
00:07:33
второй аргумент внутри Z И как вы уже
00:07:37
увидели мы можем сами строить Вот такую
00:07:39
цепочку где мы сразу сможем записать и
00:07:42
для Zen исход и для Catch также у нас
00:07:44
есть еще один очень полезный метод
00:07:46
внутри которого мы также прикидываем
00:07:49
функцию но здесь мы с вами не принимаем
00:07:52
никаких параметров А мы просто выводим
00:07:55
какой-то код который Мы хоти Как вывести
00:07:57
по окончанию отработки промисов вне
00:07:59
зависимости от того он выполнился у нас
00:08:01
успешно или не успешно
00:08:04
сохраняем обновляем и смотрим
00:08:07
что после ошибки мы с вами попали в
00:08:09
finali и вывели вот это вот сообщение
00:08:11
которое мы здесь запрограммировали а
00:08:13
теперь Давайте с вами разберем ту
00:08:15
ситуацию кто я проговаривал в начале
00:08:17
урока то есть наш поход с комнаты на
00:08:19
кухню и употребление пищи Давайте вот
00:08:22
это все сотрем оставим только наш ризот
00:08:25
в качестве примера и напишем сообщение
00:08:28
я пришел комнаты на кухне
00:08:32
это давайте мы сотрем здесь мы поменяем
00:08:36
нарезал
00:08:38
для того чтобы нам было попроще
00:08:40
восприятие И что мы будем дальше делать
00:08:42
а дальше внутри данного Z то есть данный
00:08:45
Z у нас отвечает Зато события когда мы с
00:08:48
вами пришли с комнаты на кухню мы здесь
00:08:51
внутри будем возвращать новый промес
00:09:01
и соответственно будем запускать
00:09:06
внутри которого мы будем уже давать и
00:09:08
через
00:09:09
полторы секунды переводить этот промез
00:09:13
врезал Если вам нужен только лизал
00:09:14
можете не использовать второй параметр
00:09:17
не записывать его это ни на что не
00:09:19
повлияет и во внутрь этого ризового мы
00:09:22
будем уже передавать наш предыдущий
00:09:24
result и плюс соответственно новое
00:09:26
сообщение
00:09:32
и так как смотрите мы здесь возвращаем У
00:09:35
нашего промеса также сама есть метод
00:09:38
давайте мы здесь дальше начнем строить
00:09:41
нашу цепочку то выполнится у нас После
00:09:44
выполнения нашего промиса здесь мы опять
00:09:47
же достанем наш result Давайте напишем 2
00:09:50
для того чтобы вам было понятно И вы не
00:09:52
перепутали его с этим здесь мы будем
00:09:55
возвращать еще один промез вам сейчас
00:09:58
будет сложно понимание потом сами детали
00:10:01
все разберем
00:10:09
и Здесь также у нас будет
00:10:12
который у нас уже выполнится допустим
00:10:14
через две секунды
00:10:17
и мы внутри него будем так же само
00:10:19
запускать ризал только уже нашего вот
00:10:22
этого промиса будем передавать внутри
00:10:25
него резал 2
00:10:27
плюс сообщение
00:10:30
съел эту еду Давайте сохраним чтобы
00:10:33
сейчас все выровнялось и уже
00:10:35
соответственно После этого промиса мы
00:10:37
здесь опять же добавляем
00:10:42
достаем финальную дату
00:10:45
и просто ее выводим в конце
00:10:49
и Давайте также сама сделаем на каждом
00:10:51
этапе чтоб мы с вами прям сразу в концер
00:10:53
видели последовательность наших
00:10:55
действий здесь добавим консоль
00:11:02
наш ризал
00:11:04
дальше
00:11:06
здесь добавим тут уже будет резал 2 и
00:11:10
соответственно наш финальный результат
00:11:12
Давайте с вами сохраним Давайте немножко
00:11:15
отдалю для того чтобы имели возможность
00:11:17
наблюдать весь код и перейдем в браузер
00:11:20
обновим и будем наблюдать что будет
00:11:22
происходить сначала у нас появилось
00:11:25
сообщение Я пришел с комнаты на кухню
00:11:27
потом через определенное время давайте
00:11:29
сейчас
00:11:30
секунда мы получили первое сообщение
00:11:32
прошло полторы секунды мы получили
00:11:35
второе сообщение прошло две секунды
00:11:37
после предыдущего этапа и мы получили
00:11:39
финальное сообщение и так как я говорил
00:11:42
ранее у нас каждый этап последующий
00:11:45
прямо зависим от предыдущего и он у нас
00:11:48
может выполнится только после того как у
00:11:50
нас корректно выполнится предыдущий и
00:11:52
поэтому мы получили именно такой вот
00:11:54
результат
00:11:55
раз два
00:11:57
и три финальный результат который у нас
00:12:00
закрепил все наши процедуры возвращаемся
00:12:03
в код и детально его Разбираем мы с вами
00:12:05
создали первый промез внутри которого
00:12:07
что мы сделали Мы поместили с тайм-аут
00:12:10
функции которые у нас автоматически
00:12:12
запустилась внутри неё на сайт поймала
00:12:14
который выполнился через одну секунду и
00:12:17
у нас перевел наш промез состояние
00:12:19
выполнено и мы передали вот это вот
00:12:22
сообщение соответственно Мы через
00:12:24
секунду с вами пришли из комнаты на
00:12:26
кухню дальше Мы берем этот промез и
00:12:29
через цепочку промезов то есть с помощью
00:12:31
метода Z имеем доступ вот это вот
00:12:33
информация мы с вами передали
00:12:35
соответственно мы сами Через секунду
00:12:37
вызвали данный метод внутри данного
00:12:40
метода мы с вами вернули еще один промез
00:12:43
который обозначает следующий этап это
00:12:45
тот этап Когда мы уже фактически с вами
00:12:47
на кухне и достаем еду с холодильника и
00:12:50
на этот этап у нас потребовалось полторы
00:12:52
секунды и соответственно когда мы с вами
00:12:55
успешно выполнили этот этап мы
00:12:57
предыдущую информацию то есть вот это
00:12:59
вот информацию которая нам попала вот
00:13:02
сюда вот и мы получили такой вот
00:13:04
сообщение что я пришел с комнаты на
00:13:06
кухню запятая достал еду с холодильника
00:13:09
И когда у нас выполнился этот этап мы
00:13:12
дальше через цепочку промесов через
00:13:14
метод Z перешли к следующему этапу
00:13:16
внутри которого мы сначала просто в
00:13:18
конце сами вывели вот это вот
00:13:20
сообщение и возвращаем новый этап новый
00:13:23
промез и вот фактически когда мы с вами
00:13:25
уже достали еду с холодильника мы с Вами
00:13:27
через 2 секунды вызвали функцию резал
00:13:31
который обозначает у нас корректное
00:13:33
выполнение этого этапа соответственно
00:13:34
через две секунды Мы с вами уже взяли и
00:13:36
сидели нашу еду и после того как через 2
00:13:39
секунды Мы сели иду мы с вами попали
00:13:41
следующее опять же цепочку где мы уже
00:13:43
подбили итоги всей нашей процедуры
00:13:45
начиная от похода с комнаты на кухню
00:13:47
заканчивая тем что мы достали еду с
00:13:50
холодильника и поначалу может быть очень
00:13:53
сложно и поэтому я вам советую придумать
00:13:55
какую-то жизненную ситуацию так же самое
00:13:57
написать и проработать для того чтобы
00:13:59
вам хорошо эта информация уложилась на
00:14:02
каждом из этих этапов помимо метода Zen
00:14:04
вы могли дергать еще метод кэш для того
00:14:06
чтобы обрабатывать ошибки но советую вам
00:14:08
для начала сильно себе не Забивать
00:14:10
голову и проработать хотя бы
00:14:12
положительный исход каждого из этих
00:14:14
этапов Давайте с вами все это теперь
00:14:16
сотрем
00:14:17
это также и перейдем к следующей теме
00:14:20
Давайте здесь Мы также добавим кэтч
00:14:33
эта тема будет обработка ошибок внутри
00:14:36
нашего промиса для того чтобы лучше
00:14:38
поняли данную тему Вы должны понимать
00:14:40
что у нас внутри нашего промиса внутри
00:14:43
данной функции есть неявный Try Catch то
00:14:46
есть тот Try Catch который мы с вами не
00:14:49
видим но он зашит внутри данного промеса
00:14:51
и это очень важно понимать Давайте в
00:14:54
этом убедимся Давайте здесь нарочно
00:14:56
допустим вот такой вот ошибку и
00:14:58
посмотрим что мы с вами получим а
00:14:59
получили мы с вами Вот это вот сообщение
00:15:01
9 строчки в девятой строчке мы с вами
00:15:04
попали в кэш Что обозначает что мы с
00:15:07
вами благодаря конструкции внутри тела
00:15:10
функции обработали данную ошибку и
00:15:12
подбросили ее дальше И самое главное у
00:15:14
нас ничего не сломалось это очень крутое
00:15:17
преимущество благодаря которому нас не
00:15:19
будет падать нашу программа Даже если мы
00:15:21
с вами допустим какой-то синтаксическую
00:15:22
ошибку Так что если вы немного не поняли
00:15:25
конструкцию с предыдущих уроков советую
00:15:28
вам откатиться на тот урок хорошо
00:15:29
поработать данную тему чтобы здесь легче
00:15:32
Давайте теперь здесь мы с вами вызовем
00:15:35
соответственно наш ризол А здесь внутри
00:15:38
нашего Зена мы допустим какую-то ошибку
00:15:41
и Давайте посмотрим что у нас будет в
00:15:44
данном случае переходим обновляем и
00:15:47
смотрим Что у нас уже теперь ошибка
00:15:50
связанная с 9 строкой и мы опять сами
00:15:53
попали в кэтч Почему Потому что у нас
00:15:55
есть цепочка и Zen у нас идет 1 в этой
00:15:59
цепочке и соответственно Если даже у нас
00:16:01
здесь будет допущена ошибка то у нас и
00:16:04
здесь будет наша внутренняя конструкция
00:16:07
Trike
00:16:09
и код у нас будет отрабатывать следующим
00:16:12
образом вот этот скрытый код Будет нам
00:16:15
обрабатывать тот код который мы поместим
00:16:16
внутри функции метода Z то есть вот это
00:16:20
вот будет не явно но она будет
00:16:23
и соответственно также сама по законам
00:16:25
tracketch у нас обрабатывается код
00:16:27
Сначала он попадает в траве Если хорошо
00:16:29
выполняется мы игнорируем блок кэтч А
00:16:31
если он выполнился с ошибкой то мы с
00:16:33
вами отрабатываем наш блог Catch
00:16:35
прокидом это ошибку дальше и здесь мы
00:16:37
уже взяли и отловили исходя из того что
00:16:40
я только что проговорил очень важно
00:16:42
чтобы у нас обязательно был мы с вами
00:16:44
могли взять словить эту ошибку и
00:16:46
обработать Потому что если мы с вами
00:16:48
здесь не напишем наш Catch
00:16:50
соответственно мы ее не словили и у нас
00:16:53
все упадет наш код смотреть это далеко
00:16:56
не все что я хочу рассказать но для того
00:16:58
чтобы Вам сильно не Забивать голову для
00:17:00
того чтобы вас лучше уложилась
00:17:02
информация остальную часть информации я
00:17:04
расскажу следующем уроке на этом урок
00:17:06
подошел концу всем Огромное спасибо за
00:17:08
внимание и до встречи в следующем видео

Описание:

В данном уроке мы с Вами познакомимся с темой просимы (Promise). Благодаря промисам и его методам научимся гибко управлять асинхронными событиями, выстраивать цепочки событий, а также обрабатывать ошибки на каждом этапе "цепочки событий". Приятного Вам просмотра. *** Telegram - канал, для общения и помощи в обучении между учениками, которые проходят данный онлайн курс, а также для информирования о новых видео уроках, которые будут выходить в ближайшее время - https://t.me/+wIspTmfJv3A4MmZi ***

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок."?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок." выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок."?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок." на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок."?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "JavaScript. Промисы (Promise), часть № 1. Синтаксис, методы then, catch, finnaly. Обработка ошибок."?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.