Разбор Promise и создание собственной имплементации MyPromise

Разбор Promise и создание собственной имплементации MyPromise | JavaScript

Рет қаралды 17,376

Елена Литвинова — Искусство Веб-разработки 🛸

Күн бұрын

Вместе напишем имплементацию promise. В процессе разберём особенности, которые нужны для собеседований.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZfaq: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Исходники из видео: / 57676202
❤️ Ссылка на голосовалку по видео: forms.gle/ahhftfZQNN6QVEVc9
00:00 введение.
00:39 зачем создавать имплементацию
03:00 начинаем кодить
04:28 что такое просим
11:11 создаём конструктор MyPromise
11:57 состояния промиса: pending, fulfilled, rejected
13:35 колбеки: resolve, reject, executor
14:20 теория изменения state в Promise
15:25 реализация изменения state в MyPromise
18:31 особенности выполнение executor в Promise
20:00 проверка отложенного кода
21:05 особенности resolve или reject
21:46 перехват значений - метод then
25:30 накопление then функций
29:42 проверяем ошибки
30:35 метод catch
32:54 вызов метода then n+ раз
35:28 проверяем отложенный вызов then
36:58 цепочки промисов
44:00 возврат в then нового промиса
46:34 возможности catch
Список литературы:
🍀 Проверить библиотеку - bundlephobia.com
🍀 Статья на медиум - / implement-a-simple-pro...
🍀 Статья ещё одна имплементация - www.promisejs.org/implementing/
🍀 Полифил промиса - github.com/then/promise/blob/...
Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈
Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (React, NodeJs, JS, CSS, HTML) и опыт в 10+ лет.

Пікірлер: 91

@maxet2374 2 жыл бұрын

Елена - много раз просил и поэтому ОГРОМЕННОЕ спасибо. Годных видео по этой теме для и понятных для новичков оч мало. Елена ты красотка и крутая

@webelart 2 жыл бұрын

❤️❤️❤️

@Brinzovik 2 жыл бұрын

Спасибо!! Очень интересное видео! Promise. Custom promise. Js. Промис, кастомный промис, как работает промис. Проммис, промисс

@sirlion1549 Жыл бұрын

Я не мог понять материал на learn.javascript по этой теме. И вообще не мог найти хорошее объяснение в других источниках. У меня просто перевернулось понимание промисов после этого урока, я нашёл ответы на вопросы с проваленых собесов) И вообще этот канал - клад, для джаваскриптизера)

@maratd1781 11 ай бұрын

Спасибо! И полезно, и весело. Успехов на чужбине и соотечественников не забывайте.

@kelenella_ 2 жыл бұрын

Спасибо за видео, реально нужно было с кем-то сесть и ещё раз прописать как это работает

@kelenella_ 2 жыл бұрын

А кому скроллы не нравятся на 17й минуте, так это же не стрим) возьми отмотай, пересмотри, замедли, ну серьёзно

@igormalykhin5528 3 ай бұрын

Елена большое спасибо Вам за материал. Продолжайте пжл в том же духе

@sergeiverenikin3275 2 жыл бұрын

Супер, ждал очередного урока 😊

@Syberby 2 жыл бұрын

Ждем имплементацию SetTimeout)

@vladimirglazkov7960 Жыл бұрын

это же какое-то великолепное великолепие...

@alexivanov6459 2 жыл бұрын

Чтож, под прошлым видео писал, что на собеседовании сказали: «мы вам перезвоним», сейчас напишу, что взяли в другую компанию на оплачиваемую стажировку пилить их crm-ку, растём! А тебе удачи во всех начинаниях, классный и очень понятный формат подачи.

@webelart 2 жыл бұрын

😍 Поздравляю вас с найденной работой и новым жизненным этапом! Спасибо большое за пожелание успеха, мне очень приятно! ❤️

@YuriiKratser 2 жыл бұрын

Спасибо тебе!

@helengriva3016 2 жыл бұрын

Елена, огромное Вам спасибо! Стало намного понятнее, как работают промисы! 👍👏😍

@user-lx1sp4ju3e 2 жыл бұрын

посмотрел, послушал., хотя я Java изучаю) спасибо

@user-glory-of-ukraine 2 жыл бұрын

Автор обаятельная девушка с прекрасным чувством юмора) Смотрю с открытым ртом и из-за хорошего материала и из-за милого учителя)) СПС вам за классный комплекс: знаний и няшностей!!)

@webelart 2 жыл бұрын

Спасибо огромное! Очень приятно! ❤️

@dr.margulis7773 2 жыл бұрын

Спасибо, очень важная и полезная тема!

@aleksandrippatev1268 2 жыл бұрын

мне понравилось, удачи Елена! звучит очень доступно и прикольно)

@user-pc9bl7uf1l Жыл бұрын

супер! Сенкс!!!

@WebEnv 2 жыл бұрын

Спасибо! Побольше бы таких имплементаций или поллифилов. А так видео просто 🔥

@user-of3yg1me6m 2 жыл бұрын

очень крутые видео у тебя прям ну очень, смотреть одно удовольствие очень интересно было никогда не задумывался как работает под капотом промис)

@theoty-js 2 жыл бұрын

Ты настолько клёвая,что даже после траблов со звуком смогла заново записать урок

@Nikitosss91 Жыл бұрын

Нереально имбовый контент, спасибо, Елена.

@user-ky4vq5jm5u 2 жыл бұрын

Спасибо за урок, ты вообще супер.

@egoist2956 2 жыл бұрын

Лайк..!

@daniilrozyev 2 жыл бұрын

Есть ли возможность как в Python смотреть как это всё написано внутри JavaScript, разработчиками языка?

@vladislav-qn9nr Жыл бұрын

Просто шикарное видео и подача, после прочтения статьи на learnjs вроде бы все понятно, но поверхностно, хотелось как раз подробно узнать что и куда и откуда идет, и после того как сам сел разбираться и ничего не получалось, наткнулся на ваше видео с подробными объяснениями как раз по внутреннему строению, огромное спасибо!

@mainass2616 2 жыл бұрын

СПАСИБО

@webelart 2 жыл бұрын

😘😘😘

@oleg_shulga 2 жыл бұрын

Спасибо. Очень хорошее видео.

@webelart 2 жыл бұрын

😘😘😘

@olegwinsen 10 ай бұрын

Круто. Было очень полезно. Однозначно лайк и подписка.

@user-bw1fh9pd3i 2 жыл бұрын

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

@user-iz9qp7np4q Жыл бұрын

Лена расскажите пожалуйста как поставить правильно пароль на жёсткий диск

@shavor1000 Жыл бұрын

Красотка)

@user-yj8tf7xb6g 7 ай бұрын

Не останавливайся! Твои видео лучшие 👏 Вдохновения тебе и успехов в карьере ❤

@webelart 5 ай бұрын

Спасибо! ❤️❤️❤️

@WashYourBack 5 ай бұрын

Я не понимаю. На 29:00. В then мы проверяем состояние, если оно pending - копим вызов самого метода then в массиве. Когда происходит resolve - он вызывает каждый отложенный then. Но это ведь к изначальному then уже не имеет отношения. Код выполняется уже не из строк 95:97. Хотелось бы побольше узнать что значит процесс накопления функций, и как они исполняются потом во время resolve.

@STELLS541 8 ай бұрын

Промисы - это наверное одна из самых своеобразных тем, которые могут спросить на собесе и на чем-то таком подловить. Сам вот хожу на собесы сейчас, на уровень миддл- и недавно вот подловили на промисах разок.

@dodokwak Жыл бұрын

Thx

@episarev 2 жыл бұрын

няшно

@user-rz5dh6wv3q Жыл бұрын

Классное видео,но мне как новичку после прохождения базового курса js это стало еще более непонятным))) Скорее из-за неполного понимания классов)) Методы еще понятны,а вот эти resolve и reject принимают value или error,а токуда они их берут и т.д непонятно)

@martDKNY 2 жыл бұрын

А как сделать, чтобы работали 2 зена подряд then().then() ? И как положить константы PENDING, FULFILLED, REJECTED в промис ?

@webelart 2 жыл бұрын

В текущем примере цепочки реализованы и константы тоже определены.

@martDKNY 2 жыл бұрын

@@webelartЦепочки действительно реализованы. А что на счет констант, их никак не положить в класс? Ведь Promise не требует внешних констант для работы.

@webelart 2 жыл бұрын

@@martDKNY Ммм, интересный вопрос. Промис, как и любая библиотека может реализовываться по разному. Обычно, когда происходит некоторое деление кода, это удобнее. Есть класс, есть какие-то отдельные хелперы (функции) и внешние переменные, в итоге всё импортируется как один пакет. Что-то скрыто, что-то торчит наружу. Можно посмотреть на реализацию промиса в npm (github.com/then/promise/tree/master/src). Здесь есть множество различных файлов, делений и переменных. Класть всё в один класс необходимости нет. Можно ли? Да можно положить, при этом нужно обязательно их сделать приватными, т.е. чтобы их извне достать было нельзя и как-то изменить. Здесь можно уточнить про внешние константы. В текущем оформлении они действительно внешние. Есть файл index.js, который никак не замкнут, в другом файле можно получить доступ к любым его переменным. Возможно это вызвало смущение. Один файл без различных наложений использовался для упрощения написания кода. В целом текущий пример был создан, чтобы посмотреть как всё выглядит изнутри. Но если брать этот код и встраивать в реальный проект, то лучше его оформить как модуль и импортировать конкретно класс Promise, всё остальное будет скрыто и переменные внешними не будут. Либо сделать замыкание с самовызывающейся функцией и через window добавлять глобальность к тем вещам, которые должны быть внешними (function () {... код проекта...window.MyPromise....} ()). В общем всё зависит от того как надо, чтобы было оформлено в конечном итоге :)

@martDKNY 2 жыл бұрын

@@webelart Спасибо! У меня видимо путаница с основами. Но promise является и частью стандарта языка. И я запутался тут в связке прототип-инстанс-объявление. В любом случае мне нужно еще поразбираться. Еще раз спасибо. С наступающим!

@alexsov 2 жыл бұрын

ваша имплементация (как и имплементация из первой ссылки в описании) не выполняет первое соглашение из mdn : "Callbacks added with then() will never be invoked before the completion of the current run of the JavaScript event loop." console.log(1) const p = new Promise((resolve, reject) => { console.log(2) resolve('done') }) p.then(result => { console.log(4) }) console.log(3) у вас будет выведено 1 2 4 3 а должно быть 1 2 3 4

@Maxim9575 Жыл бұрын

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

@user-ok9pg1rc1j 2 жыл бұрын

на 20:32 вы снова выводите в консоль Promise, а не MyPromise, ну или я чего-то не понял

@webelart 2 жыл бұрын

Да, очепятка 😐 Сделала скрин с этим тестом: monosnap.com/file/mVO6nGRjStldZRpyxQN7i8wOA9uxfF

@user-ok9pg1rc1j 2 жыл бұрын

@@webelart Спасибо, а то я уже не знал, что делать. Начал думать, что это всё обман, декорации, понимаете?

@webelart 2 жыл бұрын

@@user-ok9pg1rc1j Почему так подумали? По файлу просто забыла его сохранить и вывела предыдущий результат.🙂

@webelart 2 жыл бұрын

@@user-ok9pg1rc1j ❤️

@afonyya8842 Жыл бұрын

4:52 очень важная ошибка! Функция которую принимает в себя конструктор Promise не является колбэком, а вот аргументы этой функции (resolve, reject) как раз таки предназначены для передачи колбэков.

@webelart Жыл бұрын

Никакой ошибки нет - developer.mozilla.org/en-US/docs/Glossary/Callback_function.

@romanmed9035 Жыл бұрын

какой-то непорядок в ссылках на телеграмм. то что в видео отсутствует. по ссылке под видео правильная на этот момент. а само видео супер. если бы раньше посмотрел, прошел бы собеседование успешно.

@user-dx9nz5zc2k 2 жыл бұрын

then когда вы пишите в классе, - значит вы переопределяете его там?

@webelart 2 жыл бұрын

Вы имеете ввиду, когда метод then в класс добавляю? Здесь скорее я определяю этот метод, т.е. класс MyPromise и настоящий Promise никак не соединяются, это два разных класса. В MyPromise я скорее описываю как примерно может выглядеть Promise внутри. И определяю собственные методы, такие как then и catch. Стало понятнее? Либо уточните вопрос.

@user-dx9nz5zc2k 2 жыл бұрын

@@webelart, я было подумал, что MyPromise наследует от настоящего Promise, надо ещё пересмотреть. Спасибо, полезное видео!

@webelart 2 жыл бұрын

@@user-dx9nz5zc2k нет, наследования нет. :)

@alenache1 10 ай бұрын

на данный момент это лучший разбор Промисов в русском сегменте ютуба, Елена, респектище 👍👍👍

@pirozhok1337 2 жыл бұрын

эм...почему не try/catch?

@webelart 2 жыл бұрын

???

@alexidino 2 жыл бұрын

Здравствуйте, Елена! Думал писать, не писать комментарий, решил написать. Я смог посмотреть только 22 мин, после 17й минуты смотрел с трудом. Объясню почему, если этот контент позиционируется как для новичков, то почему на мониторе какие то гонки, дикие скроллы и перескакивания по коду за доли секунды? Как новичок порекомендовал бы вам сбавить темп и меньше сбиваться, потому что когда чего то не понимаешь концентрируешься на всем и вещи типа - вот здесь вот так, а нет вот так, скролл, там подправили, здесь дописали и т.д (пересмотрите 17ю минуту, что там происходит) ). Я просто выразил мнение как начинающий, за контент спасибо, но пока отложу дальнейший просмотр этого урока.

@webelart 2 жыл бұрын

Здравствуйте! Спасибо за комментарий! Здесь у меня идёт кодинг в реальном времени и поэтому думаю так получается. Плюс я в тесты не вынесла эти небольшие проверки, возможно если разделить на файлы было бы более удобно :) Но в любом случае думаю, когда я риал код пишу, то здесь настолько всё интуитивно, что такие вещи сложно контролировать. Думаю, чтобы лучше в целом осознать видео, т.к. я здесь имплементацию рассказываю (а это уже левел хороший), поэтому если вы новичок, то лучше предварительно немного ознакомиться с темой промисов, например на том же learn.javascript.ru/promise-basics, потыкаться, попробовать. И возвращайтесь к видео. Такие темы очень круто глубже разбирать, даже если всё с первого раза не понятно.❤️

@alexidino 2 жыл бұрын

@@webelart ок, спасибо, позже вернусь.

@Brinzovik 2 жыл бұрын

Видео очень крутое, но я бы тоже не понял, если бы ещё их не использовал. Обязательно посмотри его чуть позже для закрепления! Повторюсь: видео очень стоящее на мой взгляд

@martDKNY 2 жыл бұрын

Да, видео очень крутое. Когда допиливается then с promise вер. можно сократить

@user-tr8xi3ik3c 2 жыл бұрын

Думаю ответ прост. Автор не является педагогом, а значит доносит мысли как получается. Все приходит с опытом товарищ )

@steur777 2 жыл бұрын

4 минута... ну давай уже начнём промисы

@webelart 2 жыл бұрын

😁😁😁😁

@user-px1er1lb1v 2 жыл бұрын

Дир , Елена ! Залейте пжлста свои видео в российский чебурнет . Нам скоро отключат Ютуб !

@catsapp 2 жыл бұрын

2 месяца прошло инет на месте

@user-bp6fl9bd4k Жыл бұрын

Три минуты послушал и выключил, одна трепотня...

@webelart Жыл бұрын

Растите, возможно в будущем дорастёте до уровня, что сможете слушать и понимать мои видео.

@user-bp6fl9bd4k Жыл бұрын

@@webelart Возможно, вы хороший веб разработчик, но вы не смогли в первые минуты этого видео заинтересовать меня на продолжение его досмотра, одно бла-бла-бла, а значит у вас точно небольшой талант педагога. В самом начале вы сообщаете, что сами «плаваете» в этой теме, но хотите обучить других. Куда уж мне расти до ваших видео, в силу возраста у меня не так много времени, чтобы тратить его на «воду» в вашем введении. Когда мы начинали программировать в начале 90, мы разбирали DOS игрушки и программки и писали на Ассемблере свой код. У нас была всего одна книга великого Питера Абеля и не какого видео. Сейчас же каждый, кто научился забивать гвоздь, пусть криво и не до конца, считает, что может научить этому других. Ответ на свой вопрос уже нашел у другого автора, здесь же на Ютубе.

@webelart Жыл бұрын

@@user-bp6fl9bd4k Ну судя по комментам не смогла зацепить только вас. Так что давайте мы не будем диванным аналитиком продакшен контент. Не нравится, берём камеру и цепляем людей. То чем вы занимаетесь, называется хейтерство. И вам точно не на мой канал.

@webelart Жыл бұрын

Также замечу, что вам определённо нужно тренировать концентрацию. Три минуты это пожалуй полный провал. Как вас вообще в веб-разработку-то занесло? P.S. Вопрос риторический.

@user-bp6fl9bd4k Жыл бұрын

@@webelart крутнул коментарии вниз и самый последний от alexidino, он пишет, что продержался на этом видео 17 минут, чуть выше Kosta Derabin пишет: "4 минута... ну давай уже начнём промисы", он видимо до 4 мин. дотерпел... конечно с такой подачей канал в топку.