Understanding and Using JavaScript Promises

In this tutorial we cover what JavaScript promises are and show you how to use them to code asynchronous JavaScript. We will look at a couple of examples to help this sink in.
Would you like to help keep this channel going?
/ allthingsjavascript
For more resources on JavaScript:
www.allthingsja...
Full personalized courses on JavaScript:
allthingsjavasc...
I've released a brand new course on Asynchronous JavaScript: allthingsjavasc...
Access to EVERY course (get 2 months free): www.skillshare...
Courses offered on Udemy at a discount (access from my site): allthingsjavasc...
Tutorials referred to in this video:
Understanding and Using Chaining: • JavaScript Tip: Unders...
Arrow Functions: • Arrow Functions
Object Prototypes: • JavaScript Question: W...

[@ahmedr.]

Bravo! Before I watched your video I was preconditioned that promise in Js is hard to grasp and understand. I got it after 20 min .. amazing content :)

[@AllThingsJavaScript]

Glad it was helpful!

[@mattjak7834]

Thank you. It's a pleasure to watch such detailed and simplified for understanding materials. Thank you so much for your work.

[@amguruprasath8037]

Don of javascript == Sir, Steven Hancock.

[@RameenFallschirmjager]

This concept ain't so easy. It takes multiple iterations to master. I watch your videos more than once. This one is almost excellent!

[@LunaLovelyy]

I nearly gave up on Promises until I watched this video. Thank You so much

[@AllThingsJavaScript]

Glad I could help!

[@fanuel2198]

Thanks a lot! This was much easier for me to understand compared to other videos I watched

[@germanduterte7110]

Thank you for the deep explanation and simple example of what is promises in JavaScript

[@alexanderalancahutay4821]

I really understand what a PROMISE really is because of you. Simple explanation thank you so much..

[@AllThingsJavaScript]

Thanks for the feedback! That helps me continue doing this.

[@RameenFallschirmjager]

I wish we could dine together! We could talk about how to dominate the world with javascript!

[@ayasswain]

Wonderful tutorial on promises. Where is the code of asyncFunction( ) ? I mean the body of asyncFunction( ). Your voice is clear and the way you explain with example code is too good. The best teacher on javascript award goes to you :-) .

[@AllThingsJavaScript]

Thanks for the positive feedback! The asyncFunction is in a separate JS file attached to the same HTML page. I just separated it to simulate a function that might not be a part of your own code.

[@suemendez5674]

Promises kept, thanks for the lesson, have a good day.

[@mage9264]

Top teaching skills and resources.

[@konstantinkkk8397]

you have created asyncFunction() but why you do NOT show the content of it? I have not understood this lesson from the beginning :(

[@AllThingsJavaScript]

Is your question asking why I created the asyncFunction? Or is there something else you would like me to explain better?

[@konstantinkkk8397]

@@AllThingsJavaScript when you type in asyncFunction () in browser it show Promise. What the content inside of asynkFunction ()?

[@AllThingsJavaScript]

asyncFunction just returns a promise. That is all. It sets a short timer and then returns a promise.
If you haven't yet it may help to watch all the movies in the playlist: ruclips.net/p/PLTo9PCskHpbHIDnzl8tRYldSCSQaFgAHd

[@dheerajnaik6467]

Hi Konstantin . . To answer your question , the tutor has set up those promises.

[@michelcmorel]

Great work. Thank you very much👍

[@chrislopezzz]

Beautiful teaching .... well explained!

[@carlosfernandez6470]

Nice explanation thank you so much.👍👍

[@zameeebasha]

Excellent explaination Steve, you did not mention that promise.then() / catch() methods return a promise in turn, if I am not wrong.

[@AllThingsJavaScript]

You are correct! then and catch both return promises.

[@someoneoutthere1866]

very well structured video ;)

[@nikhilkohli3064]

Hi Steve, can you please post the contents of asyncfunc() and asyncfunc2() ?

[@AllThingsJavaScript]

I don't remember the exact function but it was simply doing a settimeout I believe. Something like this:
let asyncFunction = function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(asyncFunction has been resolved");
}, 5000)
});
};

[@konstantinkkk8397]

@@AllThingsJavaScript finally I find it!!!! It was very important!!!!

[@PixelTB]

Thank you for explaining it well. But I just have one question, does the .then functions itself returns a promise? Because you chained the .catch function to the .then function.

[@AllThingsJavaScript]

The then method doesn't return a promise, but may contain something that returns a promise.

[@sameershrestha7818]

At 23:28, what happens when there is an error in the second .then?
Won't the following .then get executed?
It seems like the control flow moves to .catch whenever an Error is created. Is it so? And .then before .catch doesn't returns a promise, how can it work at all?

[@AllThingsJavaScript]

Yes, if there is an error, it jumps to .catch and executes whatever is in .catch. So you need to make sure you include in .catch what you want to happen if there is an error. If you need to address errors individual, pass two functions to each .then.

[@cjmarchi]

Great! One thing that I find odd is..where is the asyncFunction () and asyncFunction2 () declarations?
BTW, I love all your tutorials, please keep up the good work!

[@AllThingsJavaScript]

They are in a separate JS file.

[@LunaLovelyy]

@@AllThingsJavaScript That confused me as well

[@anishkc1831]

@@AllThingsJavaScript what's inside asyncFunction () function ? I am curious to know about the promises codes written inside the function .

[@AllThingsJavaScript]

@@anishkc1831 It just has a setTimeout is all. It looks something like this:
let asyncFunction = function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("asyncFunction has resolved.");
}, 4000);
});
};

[@anishkc1831]

@@AllThingsJavaScript thank you for a great tutorials bundle with depth knowledge

[@sameershrestha7818]

Does console.log(def) at 21:33 need to be asynchronous?

[@AllThingsJavaScript]

Thanks for the question. It is asynchronous because it is in response to a promise, in the then statement.

[@MrBenjjj6]

Thank you!

[@seebugaud7243]

Hello sir,
Please tell me what is array-like object and how do create own array-like object?
Am new in JavaScript

[@AllThingsJavaScript]

An array like object is simply an object that has a length property and then some indexed properties. So it has features of an Array, but was not created with the array literal ([]) or array constructor (new Array()). I'm not sure why you would want to create one, just create an array. However, sometimes these are created for you. For example, a node list (when you select HTML nodes) and the arguments of a function are array like. Usually we convert array like objects to arrays in order to work with them. Here is a tutorial: ruclips.net/video/avPIXAftj24/видео.html

[@mukurajpoot6550]

Sir i am not able to understand ..a function that returns promise which converts the given array of string into uppercase and returns the result after n seconds, where n is the length of input array.

[@AllThingsJavaScript]

Which part are you having difficulty with? Have you viewed the entire playlist on promises?

[@sarveshsridhar4465]

getting an error, async function is not defined....help!

[@AllThingsJavaScript]

Can you post code? If you are trying to use the same code as the tutorial, remember I defined an async function in a different JS file.

[@sarveshsridhar4465]

@@AllThingsJavaScript
Sorry, I missed the function defined in the other JS file

[@kartp2869]

is it possible that output of one promise can be use as input for another promise. If yes can you direct me how to do that.

[@kartp2869]

I must say the most meaning video on chaining. Thanks a lot and keep up the good work

[@AllThingsJavaScript]

Yes, you would do that by issuing another promise. Does that help?

[@flifluflofli]

Can not believe from all my classes it the course where i get the closest of understanding it but hahah still the logic escape me terrible hey lol I will get it :)

[@MrMarkgyuro]

so it is always better to convert data to json ?

[@AllThingsJavaScript]

When using fetch it is how you access the data. You use the json method to convert the data to a format you can work with.

[@MrMarkgyuro]

@@AllThingsJavaScript thank you! n really precise video🤗

[@Behold-the-Florist]

Dry-hole? :| Amazing video but that totally distracted me! xD

[@vont8424]

for beginner, it's tough to understand the JS promises concept from this video. I only managed to get little understanding from this video.

[@AllThingsJavaScript]

As a beginner I wouldn't suggest learning promises from the start. I would recommend starting with the basics first. Perhaps a book or a course to get the basics down and then you can add to it.

[@AllThingsJavaScript]

If you are interested in my getting started course let me know. I'm not trying to sell this to you, I just think you would avoid a lot of frustration by learning the basics first. Good Luck! Stick with it!

[@Pareshbpatel]

2021-09-20}

[@Arty47]

cool

[@vinayn9110]

The concept is easy, the syntax is confusing !! in JavaScipt so many brackets etc..etc... and all tutorials assume you known the syntax frustrating !!!

[@AllThingsJavaScript]

Which syntax elements are confusing? We can help clarify it.

[@vinayn9110]

@@AllThingsJavaScript anonymous functions that have no name such as function(val) , is that a self evoking function?

[@AllThingsJavaScript]

@@vinayn9110 This is really considered a callback. I've got multiple tutorials on callbacks you may want to look at. This is a declared functions that is passed into another function; in this case the then method of a promise. The then method is then responsible for invoking that function. Callbacks can be a bit confusing, but are vary powerful. Here are links to a couple of tutorials: ruclips.net/video/Nau-iEEgEoM/видео.html and ruclips.net/video/tBjvWZn9fvs/видео.html

[@vinayn9110]

@@AllThingsJavaScript thank you very much.