Promises - Javascript In Depth

Подписаться 12 тыс.

Просмотров 4,7 тыс.

50% 1

We learn about Promises in Javascript. They allow us to deal with events that happen asynchronously in the future. This is one of the superpowers of using Javascript for our programs and is a common feature in many other languages albeit in slightly different ways.
We will see Promises show up in almost everything we do when we get to front-end and back-end web development, but it appears everywhere else as well.
This video deals with "vanilla" Promises. In a future video we'll get to async/await syntax that simplifies how we can use these promise chains.
This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: • Javascript In Depth
Chapters:
00:00 Introduction
01:12 Promise Concepts
11:29 Promise States
12:55 Promise Analogy
21:39 Promise Flow
22:20 Creating a new Promise
26:04 Promise Constructor Code
33:12 Fulfilled Promises
35:24 Fulfilled Promise Code
38:39 Rejected Promises
39:42 Rejected Promise Code
43:00 Promise Chaining
48:55 Next Steps
📦 Github Repository with the notes and exercise code+solutions: github.com/Nooder/javascript-...
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader

Наука

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

6 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@emacsultron6212 10 месяцев назад

Fantastic set of videos in your channel, Nader. And all free! I'm really excited in any backend, testing and finally, system design series that you may have planned (I hope that's the case). Excellent, clear (lovely) voice, easy, friendly pace, beginner friendly explanations, and just enough repetition so that the concepts stick!

@TechWithNader 10 месяцев назад

Thanks! Yes, that's exactly the plan as I"m working on the REST API series right now (backend in Deno). Then I hope to get some of the Computer Science and design topics as well, and maybe some python/AI too soon 😊

@senniagordinskaya4051 Месяц назад

@@TechWithNader Nader, I hope to see all these courses on your channel!

@properwaffles Год назад

Only a third of the way through and already love how you present this stuff. Keep it up, please! 🙌🏻

@TechWithNader Год назад

Thanks, that means a lot! That's the plan :)

@644sixfortyfour4 Год назад

Very neat way to explain Promises, especially the ice cream store. Thank you!

@TechWithNader Год назад

You’re welcome! I’m glad it made sense, especially with my beautiful drawing skills, haha! 🥳

@fabioescobar5463 Год назад

Finally I kinda understand asynchronous JS, thak you!

@TechWithNader Год назад

You're welcome, Fabio! This is a really tricky concept to get down, so good work! 😄

@lauraogbechie2263 4 месяца назад

I really appreciate the way you teach. Everything is explained as basic as possible. Thank you.

@mycg-09 Год назад

Hi Nader, I am so grateful I came across your videos. I've been studying Promises for weeks with my bootcamp and watched many tutorials on RU-vid. I like the way you explain every step of Promises, the diagram really helped too, and the ice cream analogy with the bear analogy lol. When you explained the order of code execution in the Fulfilled Promise Code chapter really unlocked a fundamental part of Promises I was not understanding from other videos I'd watched. Especially how you laid out what gets passed through .then, that it's the resolvedValue from resolve() - so clearly explained! Thank you!

@TechWithNader Год назад

Hey, and thanks for sharing this! I'm glad you got some good learnings (and amusement) out of the visuals and analogies, haha! 🥳

@Talel_kraiem Год назад

I'm in love with this series 👏

@TechWithNader Год назад

Thanks Talel! 😊 It's awesome to know that people appreciate this series and the content - the ultimate goal is to enable anyone to learn this inside and out for free from scratch!

@TheHarist28 3 месяца назад

You are amasing , Thank you

@GanishiRanaweera-ip3uo 7 месяцев назад

Great!

@OXIDE777-is6gs Год назад

Awesome and funny examples :))

@kepdani Год назад

very nice video as always. I think I discovered a mistake in the presentation In the Rejected Promises part, the comment says "Here's your ice cream!", but in reality it's "Sorry, we're out of ice cream!". Anyway very good content. I'm bingewatching all of them I wonder why at 47:31 the IDE not fading out the reject, since based on this state of the code, it wouldn't run ever, and usually it does fade out code, that'll never run.

@nanlunglongtau2076 5 месяцев назад

Same here

@parnasmi Год назад

Good explanation on javascript promises! Thank you very. I will continue watching your other videos.

@TechWithNader Год назад

Thanks Ilhom - and you’re very welcome! It was fun talking about ice cream and promises, haha! In all seriousness, I’m glad the analogy came through nicely 😄

@simplyskandi5973 Год назад

Absolutely brilliant explanation on promises. The best on the internet and I have gone through many videos and articles on promises alone. I thought I understood them but you took time in explaining all the nitty gritty details which makes everything absolutely clear. Please keep teaching and keep making these videos. Any plans for JS projects. I feel like I have a decent enough handle on the theory but would love simple projects where we can apply this theory. Thank you so much.

@TechWithNader Год назад

Wow, thanks for the praise it means a lot! That’s the intention of these videos and series so I’m glad it’s coming across 😊 I’ll be making a project or set of projects for this second half soon after a few more videos and topics are covered. Will be relying heavily on promises because they are the bread and butter of working practically with JS haha, so can’t wait! 🤓 Let me know if you have any recommendations for future content!

@simplyskandi5973 Год назад

You deserve it, top notch content! This is my personal opinion, could be wrong but I feel that there aren’t clear enough tutorials on Node JS. There seems to be a gap. It’d be great if you could keep that in mind when planning future content. I would love for you to teach it.

@TechWithNader Год назад

@@simplyskandi5973 Will do!

@mushroom6538 Год назад

Whoa super detailed I got all the answers. great work and entertaining. And the drawings were great

@TechWithNader Год назад

Thanks Mushroom! I’m glad someone appreciates my drawings, haha! 😆

@user-lf1ym3xt9p Год назад

Great content..Keep up the good job🎉

@MateoEstudiante 10 месяцев назад

Thanks :)

@itsokthen Год назад

These are really great, you started posting at the perfect time for me 😂

@TechWithNader Год назад

Thanks! I’m glad to hear they are useful 😊 Let me know if you have any suggestions too!

@user-wl2em8qm3k Месяц назад

Thanks

@kaafi8921 Год назад

Your explanation and the way you make exercises about the concept is really amazing Create a tiktok videos of this content so we can get more people follow you

@TechWithNader Год назад

Thanks! I’ll try some of the other platforms after I get this series done 😊

@aquibjaved3911 Год назад

Good stuff, here’s a sub!

@TechWithNader Год назад

Thanks Aquib! Glad you’re enjoying the videos! 😄

@jeremiahabiola994 Год назад

Nice video man. Kudos. Keep em coming

@TechWithNader Год назад

Thanks Jeremiah! Lots more coming 😊

@jeremiahabiola994 Год назад

@@TechWithNader You are the best

@TechWithNader Год назад

Hey Jeremiah, just letting you know I got the Discord server up and running if you're interested in joining: discord.gg/Qkc62kpsKr

@wjm915x 3 месяца назад

Really well done. Thank you!

@kinrev6719 Год назад

Thanks, GOD Nader for explaining the concept of the promises easily and neatly with the help of the diagrams. My favorite ice cream flavor is "Butterscotch", what's yours?

@TechWithNader Год назад

Haha! Vanilla 😂

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

Hello Nader, could you please tell us what theme do you use? It's very nice!

@oneofone_1333 Год назад

Hey Nader Been watching your videos the last couple days, you helped me alot🙋‍♂️. do you offer 1to1 sessions? Love from Switzerland

@TechWithNader Год назад

Hey there, glad you are liking these and thank you! 😊 For now I’m focused on making this content freely available to everyone on top of my other work haha. Feel free to join us on Discord though where I’m always online and so are several others in the community at various stages in the industry: discord.gg/Qkc62kpsKr

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

I set up node.js on my computer, but I'm wondering how you got the terminal to look so nice in your IDE. Mine is stuck at the bottom of the screen and the text is all one color.

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

Hey Chris! Hope you were able to figure this out. If not, I have a video on exactly how to do that on the channel timestamped here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FPmgQsXMPqI.html Hope that helps! As for the colour, the terminal colour changes are a bit more involved and it varies greatly depending on what operating system and terminal you're using. In my case I'm on a mac and using zsh where I have a configuration file setup to theme it to match my vscode theme 😊

@arturaghasafyants316 Год назад

@TechWithNader Год назад

🚀

@nanlunglongtau2076 5 месяцев назад

Exactly

@XanEli1 Год назад

I'm wondering is the default that a promise can be pending forever or is it that if it's pending for a certain amount of time and doesn't get fulfilled it gets rejected?

@TechWithNader Год назад

Great question! If you never resolve or reject, the promise will never "settle" and will be stuck in pending forever. You can try it like this: const forever = new Promise( () => {} ); console.log(forever); You can .then and .catch on it (since it's a promise), but since it will never resolve or reject that code will never run. In practice you'll probably eventually have the promise resolve or reject even if it takes like 30s or so :)

@XanEli1 Год назад

@@TechWithNader Thanks for responding so quickly! So, let me ask one step further. Do people add conditions for example that handle if a webpage were to not load after 1 minute, they would reject it?

@TechWithNader Год назад

@@XanEli1 Ooo, really good question! This is tricky to answer as there are several possible ways to deal with this and it mainly depends on what you want to happen. Here are some possibilities: - retry after X seconds with a new action/promise - if still failing after X retries maybe we give up - exponentially stagger the retries like 2, 4, 8 seconds etc then give up after some X amount of time - … several others and many that are less general 😄 Hopefully that gets the wheels spinning! We’ll see some of these strategies when we work with APIs and fetch real data 🤓

@XanEli1 Год назад

@@TechWithNader Oh I see, so it's up to the developers what best suits the given request and it's potential bugs to do with pending :D thanks!

@KRAKENBACK.. Год назад

If you can chain promises with returning "yo" are you only able to chain fulfilled promises with .then or are you also able to chain rejected promises with .catch?

@KRAKENBACK.. Год назад

and on those other chained promises are you able to add the delay time to those promises too or is the delay only on the resolve/reject new Promise function?

@TechWithNader Год назад

Good questions! Once a promise is rejected, it will look for the .catch. In there technically you can return another promise in the catch that you can .then on but it gets quite confusing quite fast at that point 😃 Also, each new promise can have it's own delay and time 😊

@septembersaii2364 Год назад

Would we have to use a set time mount function to add the delay to the chained promises?

@TechWithNader Год назад

@@septembersaii2364 Yup, for this this is our only method to artificially delay things haha. Later it will be things like “fetch something from a remote server” which takes some time and we can do that in a chain or as the first promise etc. Hope that helps! 😊

@TheZayzoo Год назад

Do you have a video on closure?

@TechWithNader Год назад

Great question! Not yet but that’s one of my favourite topics and will be a future video 😄 Once we see scoping issues come up more it will help closure make more sense too.

@TheZayzoo Год назад

@@TechWithNader thanks! Can't wait to see it.

@644sixfortyfour4 Год назад

Yes please, I may understand it if you explain it. 😬

@bulentgercek Год назад

Your effort in explaining the Promise concept is commendable. However, the setTimeout example in the input has nothing to do with the Promise. It's usually explained with this function, but it's completely misleading. In the Promise Constructor Code section, it is only the setTimout function that allows writing "Hello?" and "Hello my friend" respectively. All Promise does there is call the Executor function given in the process of instantiating by constructor.

@TechWithNader Год назад

Hey Bulent! Thanks for the comment - yes you're right the constructor takes the executor and that part of the vid specifically wasn't really "using" the promise at all 😃 The approach here was meant to show the build-up to the actual use of the resolve and reject function calls that came next to change the promise state one step at a time 😊