Big props for taking the time to cover the inside story so we understand what's going on under the hood. You always provide just the right amount of detail, most videos are either provide too much detail or not enough.
The first time I'm commenting to a tutorial, as it made me do. The best promises tutorial on the internet. Nailed it completely brother. Thank you very much.
Great tutorial! The part where you say that promises are a placeholder for the result of an asynchronous action helped me fully understand the concept, as well as appreciate the usefulness of promises.
Thank you so much for this video. I was pretty frustrated today because of the callback hell and didn't quite understand promises before. This cleared so much for me in 13 min. :)
Magnificent! 👍 no async await? Very helpful tutorial. I understand your content better than any others it seems, even tutorials I have purchased. You have just got that knack man! I salute you. 😄
amazing videos thanks :) It was funny my heart sank when you said `.next` by mistake, I was like omggg I did not get it, there is more to it! LOL and then you corrected that :DD
You are great at explaining stuff mate, just been on your Patreon page and may well sign up in the future! Hope you get your $1000 a month so you can do this full time! Nice to hear a fellow countryman teaching as well ;)
Lovely work mate, big fan of yours. As everyone has been saying - your content is definitely easier to understand and digest. Massive thank you for doing this. Wanted to ask you, is it possible and is it good practice to add error handling to the final $.get code that you show in this video? Or does jQuery .get method already has error handling built in?
Lovely tutorial as usual. In this case, 7:09 , can we say it is synchronized calls as they are sequential and waiting for the previous call to complete?
Hey, The Net Ninja, I recently saw something really intersting : the parallax scrolling. Some websites use this trick and they look really nice could you make a tutorial ? I love your tutorials. (I'm french, pls don't blame me if they're mistakes)
Great job Net Ninja. So if Promises are already built into jQuery, and it's that short of a code block .... why would you use the first method? Because you can't use jQuery?
Do you have a github for these codes? If you have, can you put it in the description? BTW, your explanations are super clear and you are doing a great job. Subscribed to your channel.
Hey, really nicely explained. I just had a question that with the parameters, in the functions like resolve, reject, tweets, error, xhr etc etc. Are these some kind of keywords we absolutely have to use to get the data? If they are not, then how does the function know to log the json data to the console when you pass anything to the function? Thanks.
So I'm watching this, and this is all new to me. I've never had to use promises in the (seemingly simple) things I've built, would an appropriate scenario for promise use be when you're trying to get data from multiple sources/api's at once?
Hey, I really appreciate these videos and it's very well explained. Thank you! Can I ask a question that is sort of related to this video? I've seen lots of nodeJS tutorials where people use an NPM library called Async. I cannot see what Async brings to the table that your method (shown above) cannot already handle. So, I'm trying to decide whether to use the NPM Async module (as I see in a few tutorials) or whether to use your method - which appears to be pure javascript. I'd be REALLY grateful if you could shine some light on this. Perhaps I'm missing something. Thank you!
Hi, thanks for your brilliant tutorials. In this one, I still dont get the use of "resolve" and "reject" arguments. They are supposed to be functions as they receive a value, but I dont see where it goes from there.
I have a question: do you know how you would return values from a function (where in the function you are receiving the image dimensions from a url) and store that into global variables (preferably a global array)?
Thank you for your videos, and i want to ask you if i have an XML file instead of JSON file, can i do resolve(XML.parse(xhttp.response)) to have my XML object (I have tried it but it's not working) what should i do?. Thank you again and good afternoon.
If the first promise in the chain returns an error, will that error just be forwarded until the catch() at the end of the chain? And what will happen with all the promises in between? Will they get ignored?
What I'm not sure of: Does it make sense to use $.get() after using an AJAX call? They don't seem to be similar in that respect and I have a ton of ajax calls from coming live websites via API.
3:16 Can someone please explain: I'm assuming the first function parameter in a .then() statement always represents the returned result of the promise and could be named anything we want. I'm assuming we are free to add more parameters to this kind of callback function, but the first parameter is reserved for the returned result of the promise. Are my assumptions correct?
Hi, is there a way this could be used with a loop say to get the values from an array and use each value to form the requests, so you could make a request for each item in the array? Thanks
There is one god damn thing that I can't understand, its the parameter of the callback function: If i understand correctly, a paremeter is just a placeholder for whatever argument we want to pass in the function. How does it know that the parameter "tweets" refers to whats in the "tweets.json" file. The name of the parameter is up to me, I can call it "tweets" or whatever I want, but how does it know what to pass in > How is "tweets" replaced by the content of the "tweets.json" file? By what argument the "tweets" parameter is getting replaced? $.get("data/tweets.json") .then(function(tweets){ console.log(tweets); }); Its probably dumb, but I can't visualize it.
The parameter to that particular callback function is passed by resolve(JSON.parse(xhttp.response)); in the previous execution of 'get', which was get("data/tweets.json");, hence we know it's this data we're getting as we've explicitly requested it.
Not sure if you still need a reply, but going to reply anyways for anyone else who chances upon this video and has the same question as you did. The tweets parameter can be called anything else, and it doesn't replace 'tweets.json', rather is a placeholder for the data that is returned by the 'get' request. In our case, the 'tweets' parameter happens to be a json. It could also be text. It could also be a boolean, or a string or any other data type. How you wish to handle that data type is up to you in your callback function!
In checking the documentation (starting at api.jquery.com/jQuery.get/ , you'll see that Promise is a deferred object, so --> api.jquery.com/category/deferred-object/ and from there, there's no "catch", but I found 2 options:- api.jquery.com/deferred.then/ - and this has a 2nd function to call on failure api.jquery.com/deferred.fail/ - this can be chained to, but, you still get an ugly message Perhaps Shaun could comment?
Great tutorial. I was hoping to see error handling at the end of the jQuery methods. .fail worked for me window.onload = function(){ // the jQuery way $.get("data/tweets.json").then(function(tweets){ console.log(tweets) return $.get("data/friends.json") }).then(function(friends){ console.log(friends) return $.get("data/videos.json") }).then(function(videos){ console.log(videos) }).fail(function(error){ console.log(ErrorEvent) }) }
outdated lessons, non-working Access to XMLHttpRequest at 'file:///.......tweets.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
whats the point of using promise if you are not gonna get all the 3 data asynchronously? thats so absurd to me to use promise and .then in this example. you could just use regular request if you wanted to synchronously get data sequentially AFTER (.then) the first request finished. so stupid. in this example you are only using 1 thread. unfortunately all the tutorials on youtube missing the point of using promise and making the same dumb example just copy paste other youtubers without knowing whats going on
The point being made is that you can write asynchronous code to fetch multiple sets of data in a synchronous way. This could be, for example, using a couple of different apis, where the request of one is dependent on the response from another. So async requests can be made synchronously if needed. And it’s still non-blocking. The rest of any code in the file could still run while this happens That’s not always the case, and sometimes a single promise is enough instead of chaining. But that is the idea behind chaining promises. I hope this helps you understand.
@@NetNinja yes i figured out that the rest of the code runs on a different thread if applied but we dont see here or never mentioned. it was just so confusing to me first time i watched multiple tutorials to understand that. the thing is the example used many (.then) syntax which is unnecessary and counter intuitive and ive seen that out there its like a ritual between programmers. because the "friends" data we get or the "videos" dont depend on the result of the first data("tweets") and the whole point is missing we could write this code asynchronously AND use (.then ) for print the results to show sync and async aspect of it. Thanks for your response
I have gone through many tutorials.. but this one nailed it..
BOOM. Thanks :)
I agree!!! this one is really great!!
I felt so, easy to learn as beginner's.
Thanks
Promise us you gon' keep making these tutorials!
.then( "Upload those tutotials.").catch("What happend bro?")
That's gonna have to wait
I've watched so many videos trying to explain promises and only after THIS one do I finally understand them. Thank you!!!
This tutorial series has cleared up a great deal of confusion surrounding aynsc calls & promises! Thanks so much and please keep making them!
Big props for taking the time to cover the inside story so we understand what's going on under the hood. You always provide just the right amount of detail, most videos are either provide too much detail or not enough.
The first time I'm commenting to a tutorial, as it made me do. The best promises tutorial on the internet. Nailed it completely brother. Thank you very much.
This tutorial series is brilliant, very clear!
Wow, when i first subscribed a few months back, you had 80k subs. Excited to see this channel growing
Great tutorial! The part where you say that promises are a placeholder for the result of an asynchronous action helped me fully understand the concept, as well as appreciate the usefulness of promises.
thank you for explaining super hard things in super simple ways
Good job brother. One of the better promise explanations on youtube. Great real world example.
why are you better than my college professor... great explanation
Thank you so much for this video. I was pretty frustrated today because of the callback hell and didn't quite understand promises before. This cleared so much for me in 13 min. :)
your the most good teacher i ever seen , thanks a looot
Thank you very much Net Ninja ! Your tutorials have helped me a lot. This particular tutorial has clearly demonstrated promises.
Thanks a lot for this tuto, promises looks much simpler now. Also, I like that you showed 2 ways to use them.
Oh god! I'm so happy, finally I understood how promise works! Thank you!
An excellent discussion on the topic of Promises. Thank you!
Incredible videos, thank you. I have one suggestion please use a bigger font in the future as it can be hard to read on some screens.
Magnificent! 👍 no async await? Very helpful tutorial. I understand your content better than any others it seems, even tutorials I have purchased. You have just got that knack man! I salute you. 😄
Thanks man. I created this before the rie of async / await but I will be adding tuts on it in the future :)
@@NetNinja Great! Thanks for the reply. 👌👍
True story..
Man that add with headspace is the best add ever!
made simple and easy to understand,a big thankyou!
Definitely the best explanation on the topic.
Thank you so much for these tutorials! I wish you the best for 2017 and hope you can expand your channel by tenfold!
You are really ninja in the explanations :)
Also I just wanna say I love your signature "If we can spell it"
You're very good teacher. Thank You
Nice example and explanation!
amazing videos thanks :) It was funny my heart sank when you said `.next` by mistake, I was like omggg I did not get it, there is more to it! LOL and then you corrected that :DD
You are great at explaining stuff mate, just been on your Patreon page and may well sign up in the future! Hope you get your $1000 a month so you can do this full time! Nice to hear a fellow countryman teaching as well ;)
Awesome tutorial feeling enlightened :D. Keep up the good work
Hi, it's a useful tutorial. You may also like to add the steps to pass data to the URL and handling the returned values in the jQuery way.
Now I finally understand why and how fetch() returns a promise.
Lovely work mate, big fan of yours. As everyone has been saying - your content is definitely easier to understand and digest. Massive thank you for doing this.
Wanted to ask you, is it possible and is it good practice to add error handling to the final $.get code that you show in this video? Or does jQuery .get method already has error handling built in?
Lovely tutorial as usual. In this case, 7:09 , can we say it is synchronized calls as they are sequential and waiting for the previous call to complete?
Hey, The Net Ninja, I recently saw something really intersting : the parallax scrolling. Some websites use this trick and they look really nice could you make a tutorial ?
I love your tutorials. (I'm french, pls don't blame me if they're mistakes)
+Clem Nicolas Hey, that's a nice idea :). I will see what I can do someime soon!
+The Net Ninja thx you !!!
Thanks a lot for sharing this.. this tutorial is awesome. Subscribed and liked. Thanks a lot Sir. God bless. :)
Really a great Tutorial :)
You are brilliant, thank you very much.
Thanks so much :)
Great job Net Ninja. So if Promises are already built into jQuery, and it's that short of a code block .... why would you use the first method?
Because you can't use jQuery?
promises can also help you avoid blinking by lining up all our ducks and only firing the rendering functions when the final promise has resolved
Do you need a catch for the jquery method? Just trying to check whether you left it out or whether you get it for "free." Great video btw!
hey net ninja love your videos
just wondering.... how long have you been a developer???
nice and simple
11:25 - Someone was working with generators before recording this video ;)
Anyway, nice explanation.
Can we suggest the argument 'url' to be an example of implementing closure in the context of this video?
Do you have a github for these codes? If you have, can you put it in the description? BTW, your explanations are super clear and you are doing a great job. Subscribed to your channel.
Hey, really nicely explained. I just had a question that with the parameters, in the functions like resolve, reject, tweets, error, xhr etc etc. Are these some kind of keywords we absolutely have to use to get the data? If they are not, then how does the function know to log the json data to the console when you pass anything to the function? Thanks.
So I'm watching this, and this is all new to me. I've never had to use promises in the (seemingly simple) things I've built, would an appropriate scenario for promise use be when you're trying to get data from multiple sources/api's at once?
Hey, I really appreciate these videos and it's very well explained. Thank you!
Can I ask a question that is sort of related to this video?
I've seen lots of nodeJS tutorials where people use an NPM library called Async. I cannot see what Async brings to the table that your method (shown above) cannot already handle.
So, I'm trying to decide whether to use the NPM Async module (as I see in a few tutorials) or whether to use your method - which appears to be pure javascript.
I'd be REALLY grateful if you could shine some light on this. Perhaps I'm missing something. Thank you!
Excellent tutorial
Thanks :)
Why didn't you use fetch, it's a prebuilt promise for such a thing as doing an HTTP Request?
Hi could u please explain Observables? Whether Observable comes under this asynchronous JavaScript category?
Hi, thanks for your brilliant tutorials. In this one, I still dont get the use of "resolve" and "reject" arguments. They are supposed to be functions as they receive a value, but I dont see where it goes from there.
Great series man. So sick of callback hell, had to learn a better way.
الله يرزقك ما تتمناه
Thank you
If you need a friend, don't look to a stranger. You know in the end, I'll always be there.
I have a question: do you know how you would return values from a function (where in the function you are receiving the image dimensions from a url) and store that into global variables (preferably a global array)?
I have objects and this is being done for each object as well
Thank you for your videos, and i want to ask you if i have an XML file instead of JSON file, can i do resolve(XML.parse(xhttp.response)) to have my XML object (I have tried it but it's not working) what should i do?. Thank you again and good afternoon.
How come do you display an object without using JSON.parse ?
Thanks for this tutorial, you make everything easy and fun :)
If the first promise in the chain returns an error, will that error just be forwarded until the catch() at the end of the chain? And what will happen with all the promises in between? Will they get ignored?
So you don’t need the .catch handler if you use the jquery interface¿
If you can console.log() the successful request data, how can you combine it all into a single Object or single Array??
What I'm not sure of: Does it make sense to use $.get() after using an AJAX call? They don't seem to be similar in that respect and I have a ton of ajax calls from coming live websites via API.
3:16 Can someone please explain:
I'm assuming the first function parameter in a .then() statement always represents the returned result of the promise and could be named anything we want.
I'm assuming we are free to add more parameters to this kind of callback function, but the first parameter is reserved for the returned result of the promise.
Are my assumptions correct?
Hi, is there a way this could be used with a loop say to get the values from an array and use each value to form the requests, so you could make a request for each item in the array? Thanks
In asynchronous javascript, when we get data from outside the javascript then that data will always show at last after trigger all the thread.??
Is there a reason that I can't just simply make an array of the file paths and loop them over the $.get().then() function?
There is one god damn thing that I can't understand, its the parameter of the callback function:
If i understand correctly, a paremeter is just a placeholder for whatever argument we want to pass in the function. How does it know that the parameter "tweets" refers to whats in the "tweets.json" file. The name of the parameter is up to me, I can call it "tweets" or whatever I want, but how does it know what to pass in > How is "tweets" replaced by the content of the "tweets.json" file? By what argument the "tweets" parameter is getting replaced?
$.get("data/tweets.json")
.then(function(tweets){
console.log(tweets);
});
Its probably dumb, but I can't visualize it.
The parameter to that particular callback function is passed by resolve(JSON.parse(xhttp.response)); in the previous execution of 'get', which was get("data/tweets.json");, hence we know it's this data we're getting as we've explicitly requested it.
Not sure if you still need a reply, but going to reply anyways for anyone else who chances upon this video and has the same question as you did.
The tweets parameter can be called anything else, and it doesn't replace 'tweets.json', rather is a placeholder for the data that is returned by the 'get' request.
In our case, the 'tweets' parameter happens to be a json. It could also be text. It could also be a boolean, or a string or any other data type. How you wish to handle that data type is up to you in your callback function!
What are "resolve" and "reject", where are these functions declared??
YOU ARE GOD _/\_ Thanks a lot
so with `$.get()` how do we handle errors? i didn't see you writing error handling code..
Why do we have to return from the 2nd and 3rd calls to promise (get())? Promise has return inside so they look like a return from return
Hey, the return allows us to chain .next( ) again because the callback in itself returns a promise.
subscribed
One subscriber for you!!!
what is the difference between then and resolve? i can't understand..
The whahh has it place in my mind.
the .catch in jQuery?
Anyone know if promises are more widely supported in browsers these days?
Yes unless you use opera or IE11. Caniusedotcom is great for checking anything like this .
With the jQuery method there's no need to handle errors?
In checking the documentation (starting at api.jquery.com/jQuery.get/ , you'll see that Promise is a deferred object, so --> api.jquery.com/category/deferred-object/ and from there, there's no "catch", but I found 2 options:-
api.jquery.com/deferred.then/ - and this has a 2nd function to call on failure
api.jquery.com/deferred.fail/ - this can be chained to, but, you still get an ugly message
Perhaps Shaun could comment?
I am having the same question...please respond @the net ninja?
Use Axios.
hey if any one could explain me the real world scenario of promises and generaters where can we us it . that would be really appricetaed
what is future of jQuery??
Not a bright one, anymore.
@@NetNinja sadly. Promises much easyer with jquery. Shorter code
Huaaaaaa
how this $.get() jquery method is returning promise object pls some1 help me out plssss
jQuery.get() simply encapsulates the same code that "The Net Ninja" wrote - his function named get(). : )
thanks ;)
You're welcome. An "excellent" source for questions and answers is stackoverflow.com! : )
haha yap i know i do go through stackoverflow :P
" Promises Hell " ????!!! :-D
Why does the hell promise seem to me more like a hell than the hell you said?
promising
"bob's you're uncle"
-the net ninja 2017
"bob's your uncle" *
Great tutorial. I was hoping to see error handling at the end of the jQuery methods. .fail worked for me
window.onload = function(){
// the jQuery way
$.get("data/tweets.json").then(function(tweets){
console.log(tweets)
return $.get("data/friends.json")
}).then(function(friends){
console.log(friends)
return $.get("data/videos.json")
}).then(function(videos){
console.log(videos)
}).fail(function(error){
console.log(ErrorEvent)
})
}
Doesn't work
Здравствуйте россияне
outdated lessons, non-working
Access to XMLHttpRequest at 'file:///.......tweets.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Sir please speak slowly 😭😭😭
Mustafa Anwar you can decrease the speed of the video (and the voice) by clicking the small cog icon on the bottom right of the youtube window
Shift +
whats the point of using promise if you are not gonna get all the 3 data asynchronously? thats so absurd to me to use promise and .then in this example. you could just use regular request if you wanted to synchronously get data sequentially AFTER (.then) the first request finished. so stupid. in this example you are only using 1 thread. unfortunately all the tutorials on youtube missing the point of using promise and making the same dumb example just copy paste other youtubers without knowing whats going on
The point being made is that you can write asynchronous code to fetch multiple sets of data in a synchronous way. This could be, for example, using a couple of different apis, where the request of one is dependent on the response from another. So async requests can be made synchronously if needed. And it’s still non-blocking. The rest of any code in the file could still run while this happens That’s not always the case, and sometimes a single promise is enough instead of chaining. But that is the idea behind chaining promises. I hope this helps you understand.
@@NetNinja yes i figured out that the rest of the code runs on a different thread if applied but we dont see here or never mentioned. it was just so confusing to me first time i watched multiple tutorials to understand that. the thing is the example used many (.then) syntax which is unnecessary and counter intuitive and ive seen that out there its like a ritual between programmers. because the "friends" data we get or the "videos" dont depend on the result of the first data("tweets") and the whole point is missing we could write this code asynchronously AND use (.then ) for print the results to show sync and async aspect of it. Thanks for your response