16.12: Promises Part 2 - Topics of JavaScript/ES6

hello welcome to a second video on promises now what I think if you watched the previous video I talked about the idea of a promise how to use a promise with this function called fetch which retrieves data from URL and variety of other things and I looked at how you how you when the promise finishes how you use then to execute code and how you use catch if there's an error and you can chain promises if there's a bunch of things happening in sequence that's what I tried to look at so far in the previous video now I'm actually gonna take a step back here and in a way do something much simpler and probably less important but maybe we'll give some good background foundational knowledge so I'm going to talk about how to make your own promise and just in case maybe you're here for like how to keep your own how to keep your product keep your own profits and if you're here for like a self-help video unfortunately somewhat this is but maybe you want to learn about coding you might want to go to the beginner ones know it but maybe this could be the first video watch it anyway how to make your own promise so let's come with me over here and so this is more relevant probably if you are the developer of the JavaScript library and you want to support promises in your library most of the stuff that I'm going to do will involve making use of other libraries that give me promises I take those promises and hope that they're kept and also I'm actually eventually gonna get to this like new I think these are a part of yes I think it's a 2793 and 402 it's not even a number that's anyway I think it's actually just es 7 I was trying to make a joke there um but I'm actually gonna use a sink and a weight await the keywords to write an asynchronous function that returns a promise but I'm stepping through this stuff one step at a time so come back over here with me and so I've got a little p5 sketch there's nothing about this that you need p5 for but it's my comfort object you know when you're small and you have your little lovey that you sleep squares p5 was like a little lovey that I code with and so what does this do this in setup I don't make a canvas I call set timeout if you don't know what set timeout is I've whole video about that um which executes a callback the say hello function 1000 milliseconds later and that makes a paragraph hello so let me go to the browser and you can see one second later boom hello and if I made this 5000 or 6000 you know six seconds later that hello is going to pop up so this is the old the old way of doing it in JavaScript we have a function that's asynchronous that we pass a callback so what if I wanted to create a version of set timeout that return to promise instead so I'm gonna write my own and again this is really I don't know that this is something you need to do in a program but this is gonna give us some background so I'm gonna write a function and I'm gonna this by the way it's not my original idea sure you can find lots of tutorials that show this exact same scenario I probably read a few of them so I'm gonna write a function called delay I could also call it like set timeout promise just to be explicit about what I'm doing but I'm just gonna give it a different name called delay and what I want to do is I want that function to take an amount of time so that function is going to so really what I'm doing here is like just this to start set timeout so at first I've just like basically I mean this is completely insane what I've done I've written my own function called delay to just call set timeout and if I give that you know 1000 there we go but what I want to do is I want to do this I want to say delay 1000 dot then and I'm gonna use the arrow syntax here create P hello so again if the arrow syntax in is not familiar to you a new part of es6 javascript i have a video on that and then I'm gonna say catch console dot log error so I won't and I'm missing some stuff here this doesn't need semicolon there we go so this is what I want to do I want to write I want to write my code like this I want the delay function to delay for one second return a promise when it's done create that paragraph and if there was an error somehow console.log the error and yesterday someone was saying to me I should say console dot error or I could put the error in the in the Dom as well so okay so this is what I want to do now this won't work right now because it's gonna say cannot read property then of undefined because there's nothing there's no promise that's been returned so what I need is my delay function has to return a promise all right so I forgot I need to return a new promise so this is sort of I'm kind of getting closer let's just see what happens now well promise resolver is undefined so if I want to make my own promise how to make your own promise in addition to just promising something I have to provide pathways for resolution of that promise or rejection of that promise so when I create the new promise I have to say what happens when it's resolved what happens when it's rejected well let me okay so what goes in here we need a function called deal with it till with promise resolve reject then I want to pass that deal with promise function into the into the new promise so the deal with promise function is a function that I'm defining to handle resolution and rejection of the promise and that function is put is returned with this new promise but again even though I like to write no one's really gonna write it this way you're mostly gonna see it as an anonymous function written right in here and then you know if we're sticking with this es6 arrow notation we would see it look like this so now this is most likely what you're gonna see I want this delay function to return a new promise and I need to provide pathways for how I resolve and reject those promises so here's what I could do what I want sorry is I want to call set timeout what I want to call set timeout with that amount of time so I'm gonna use the callback but what is the callback the callback is actually just resolved so and I don't need this say hello function anymore because I'm gonna handle what I want to do I don't have a callback anymore I mean I handle what I want to do with the then so here what I want to do is say after this amount of time resolve the promise okay so let's just see if this works yeah it worked now here's the thing I might want to do more stuff in here and so this could actually be I could actually also write this like this as a function that executes to resolve and then other things could happen in here but I think that's besides the point I just want to call resolve because all I'm doing is waiting for a certain amount of time but here's the thing what if I were to say also in addition to delay 1000 delay you know promise sing like this doesn't make any sense right you can't pass a string to the delay function it doesn't know how much time it's supposed to wait so if I run this now it's sort of just worked weirdly but I want to make that an error I want to reject the promise if I don't get a number so one thing I can do here is I can say if and there's a function actually in JavaScript I believe it's is n a n so is n a n stands for is not a number so if time is not a number I now want to reject that promise otherwise I want to resolve the promise after a certain amount of time so this is me taking the non promise function set timeout which has a callback and wrapping it in a new function that handles it with a promise but better than just car so this this should work now in other words we should see we see this like undefined sketch ojs line nine because but I should really give it an error so I should be able to say I believe reject new and pass an error new error you delay requires a valid number or something so if I do this and now let me just take this out here right so this now is the full promise of a five promise of a fight that's not a word delay function it returns a new promise which is a function that handles resolution and rejection and it's if it's if it's passed not a number it calls reject otherwise it just calls resolve after a certain amount of time so let's run this this is my this is me calling it now delay 1000 there we go hello and now if I say delay blah blah we should see error and you can see my error here delay requires a valid number so again this is more likely something you would be doing as the author of a JavaScript library and your library has asynchronous code that supports promises again though and I think I'm gonna do this in the next video I am going to actually completely rewrite that using and I got it wrong apologies to everyone so just to be clear this is es is so confusing so let me think about this yes five I don't know this stuff I'm gonna write this out that I'm gonna go check the chat and I'll come back and correct it so let me go backwards this async an 808 is from es 8 which is JavaScript es ECM CA or something MCA specification 2017 this is es 8 es 6 which promises are a native of JavaScript as the es6 is es 2015 I think and then es 5 I don't know when yet that's the kind of old JavaScript that with var so things that are in es6 are let const arrow and es 5 is you know VAR callbacks promises so jobs could visit the thing javascript is like and always changing an evolving language and as you know watching this video in the year of 3122 none of this is relevant anymore but thanks for watching anyway about because you were here for a little self hip help video about how to keep your promises alright what was I talking saying I'm gonna come back I'm in the next video I probably got this wrong so in the next video check this video's description for a link to the next one I will come and correct anything here and talk about async and a weight thanks for watching [Music]

Channel: The Coding Train

Views: 80,664

Rating: 4.951952 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, javascript reduce method, es6 tutorial, es6 tutorial for beginners, es6 javascript, promise, promise javascript, promise javascript es6, promise javascript asynchronous, promise javascript example, promise javascript resolve reject

Id: AwyoVjVXnLk

Length: 11min 50sec (710 seconds)

Published: Tue May 29 2018