Live Stream #137.1: Promises in JavaScript - Part 1

[Music] good morning whoo-hoo it's the go-to screen on a I'd no idea what day of the week is it Wednesday I'm standing here with my green screen and my laptops and my train whistle and my markers and my tape and my bell I'm peering over here to see if the chat is saying hello to me so let's see if the computer is actually available for us to look at I was kind of rushing to get set up and it wasn't completely set up there we go Here I am and now I need my magical cloaking device which I will put over here so that this laptop doesn't block your view of code and things that knope's this this needs to go a little bit further over hello how are you it's a beautiful day in the neighborhood it is a beautiful I don't know it's a little muggy out in New York today but this here I have something to tell you it's not really technically the summertime but for me it is the summertime the semester at NYU wrapped up last week that's substantially my full-time job makes it quite difficult to keep up with making these video tutorials although the nice wonderful opportunity that I have is that I do these videos also as part of my work teaching here at NYU but now cool the semester has finished courses are over I'm still like trying to get my head reattached to my body and make my to-do lists and get organized for the summer but I do have some good news scheduling wise which is that I will be here for twice a week livestreams most weeks however there will also be weeks during the summer where I am traveling so just I just wanted to open today with giving you a little sense of schedule so I'm gonna be here now through the end of June hopefully with twice per week live streams once or twice then I will be away for a couple weeks probably the first two weeks of July then I will be back for two to three weeks and then I'll be away again for three weeks so most of August there'll be very little coding trained in August a lot of coding training June and a half as much coding train in July that's the plan for the summer now the topic that I will be covering this summer you know I will continue to do some kind of a variety of coding challenges here and there and touch on different things but the main focus of the tutorial content of this channel will be working out a better selves Bordeaux you already know what the answer is here ah shoot I hit the wrong button um we'll be attentive OGS and the ml5 library so um one thing that I'm doing which is I feel a little bit backwards but I think it's gonna work for me also I have this micro fine that other microphone that attaches to here later but I still have this strange Madonna microphone bug you know it's a broken elbow it's hard to do my voguing as usual what was I saying oh oh yes backwards so I'm I feel like I'm doing things a little bit backwards in that I am well maybe not but what the the domain my goal here the thing that I really want to prioritize is beginner-friendly machine learning tutorials using the ml5 library but there's two things that are keeping me from starting with that immediately number one is we're still here at ITP working on the ml5 library and getting it up to date with the newest version of Hunter flow yes so it's not even really ready for me to show that's number one and number two is I feel like I will do a better job with the beginner ml5 tutorials if I have kind of worked out knowledge and experience with tensorflow j/s myself so you use ml five you don't need to know censor flow yes but to develop ml five and to kind of understand a bit about how it works behind the scenes knowledge of tensor flow chess is useful so where I am so far in this trajectory is I did a lot of tutorials about neural networks with no dependencies whatsoever just this kind of toy neural network library then now I'm starting with tensor flow chess to kind of redo a lot of that but use tensor flow DJ s behind the scenes and then I'll move on to ml five that's kind of the plan for the summer let me check the slack channel okay the answer is unicorns that hint rainbows this is not me I am swimmy asks is this the new standard Mike I mean unless people really think it's better it's not it's just that when it was ITP thesis week all of the I a lot of the microphones that I had up here got used for presentations downstairs and I just haven't tracked down where they all ended up so I can't find the one that attaches here by the way I'm wearing a new coding train hoodie this one is actually not technically available for sale but I should add it to the store this I got as I use printful to print merchandise it's a company printful and then I sell the stuff through store envy I think it's coating train dot Storenvy comm something like that so if people like are interested in this hoodie let me know I'll add it to the store there is a hoodie there but it's like a different one this is the anyway it's not that important Barnsley Simon writes in the chat that Barnes Lee's fern can be done since the photo says that it's interesting I would like to see that is our rim in the chat asked is he going to talk during all this live stream or is he going to do something mostly talk I might if we're lucky I'll do something the ratio of talking to doing something is high I'm not very good at the doing of something I will do my best I would say that if the talking is too much for you you could wait for the edited videos that come out after the live streams that get rid of all of my talking and try do and there's still a lot of talking but reduce the amount of talking and emphasize the doing alright so so there's a reason however why today I will not be talking today this microphone really is makes me very self-conscious it's a bit more breathy mouth sound yeah yeah there's not - I mean I could one thing I could do is I could bend it away from my mouth a little bit maybe I was too much sorry I have my monitor where I see myself over there that's why I keep looking over there instead of looking at you my friend watching this live stream alright let's see if that's let's see if this is better okay what I was going to say is the reason why I will not be talking about tensorflow Jess today is that in order to use tensorflow Jess effect I need to I need to be comfortable the idea of promises so I promise to you that I will cover tensorflow digests that no no I promise to you that I will cover promises then I will cover tensorflow yes catch I don't know what I'm gonna do if I catch an error going on the classroom next door to me I thought it's this summer there wouldn't be so that's my plan today I'm going to cover promises and the key words a sink and a weight and how those work in JavaScript all right looking back tape the upper part to your face no interesting idea this is what could possibly go wrong we've been putting some tape here oh that I have to look hold on let me what could possibly be go wrong am I gonna have like a bald patch what if I tape it to like my ear behind my ear all right that feels a little more stable actually all right [Music] now I have a few other important but now they're not important here it's important you can go do something else but I have a few other announcements pieces of information to let you know about number one there's music can anybody hear that music there is if I go to youtube / the coding train there's me right now live you can check out the recent highlight reel of the ITP spring show so if you haven't seen this already check it out there's all these wonderful projects made by the students here at ITP so I encourage you to check that and then you might also notice something new here sponsor bump bump bump bump so I am baited people are talking you the voice is low if in the slack Channel good segue here if you could let me know if the audio is okay or problematic I can always bump it up there's this new sponsor button so I am beta-testing YouTube's a new sponsor feature which is very similar to patreon I have a patreon page and so what I want to mention is mention is if your intro look at this oh they redesign stuff look at that or maybe I don't know who knows so if you sponsor on YouTube right now I'm using both to fund this channel I'm using both YouTube sponsorships and patreon the YouTube sponsor a sponsorship is the equivalent of the $5 patreon level so you will if you choose to sponsor via YouTube you will get an invitation to the slack channel and you will also get a I will mail you stickers sometimes we did here hopefully sooner than that but takes me a while to get to it and stickers like these coding train stickers I have here alright and then but you also get some benefits like if I go here look there's me if I look at the chat I don't know if anybody in the chat right now is a sponsor but if someone in the chat is a sponsor you can post some custom emojis Oh welcome to sponsor OB Lynde wall okay so OB Lynde wall is a sponsor now so here's the thing you get a badge you what but this is YouTube this is YouTube you get a badge but I can customize these badges so if anybody is a graphic designer out there and I mean I have a lot of coding trained design stuff already but if the the first person ever to sponsor on YouTube otherwise Jake Crowley I believe that was at the last livestream you get this sponsorship badge but I can customize those so if any wants don't we designed design the badges um just get in touch and then you can also you also get some custom emojis so anyone in the shadows a sponsor see we can figure out oh there we go I see here's the custom emojis but I can add a lot more custom emojis oh and here you could also type something here and hopefully I'm going to close this before people start realizing they control me they control me or they can try all right so I oh it's still there look at that how is it there oh because I entered wait how oh no no I'm not on that I'm so I lost my mind for a second all right that's all I have to say about that I don't want to I don't want to the I don't want to get get too lost in that I want to do I want to do something today so let's see here so let's get started by washing the whiteboard wait one thing I'm curious about by the way so I have slowmode on in the chat if anyone could help me with this I have slowmode on in the chat and which means you're limited to posting a chat message every 10 seconds I'd be happy to experiment with turning that off we had some issues with the chat and I can set that to any number so I'm curious if anybody has any feedback about what would be a good amount for slow mode and I'm also curious I believe if you're a sponsor maybe slow mode doesn't apply to you can anyone test that and I do know that let me just I do know that it's possible for me to make the chat exclusive to sponsors only but I'm not going to do that I instead yeah I'm not I'm not planning to do that at this point all right how come I can't switch to the other camera all right so can you see me over here let's take some time to wash the whiteboard [Music] this is what we do here on the coding train you know it's always good to have a good coding warm up some people like to warm up by stretching meditating having like a nice like healthy smoothie but you know don't don't put any added sugar in that that's not what you wanted your healthy smoothie but I I like to warm up and get ready for my coding day by washing cooling and advertising my merchant I sit and process you know in New York City is a very expensive place kudos let me just tell you not that I'm complaining I'm a very lucky [Music] yes you are a person sitting at your computer are on your mobile device watching somebody wash a whiteboard offline by tensorflow not a list is missing we have to rewrite that I didn't erase it somebody came in here in a race there is that I didn't write that stuff there's another play the serial feat music again but then I'm just gonna get a copy right alright [Music] remember when somebody asks is it just gonna be all talking or is he actually gonna do something well guess what it's not all talking it's also be washing away if that kind of doing something sir ready to code think about algorithms and things with this fresh wait [Music] all right now the question is the question is is this marker going to do the job for me oh yes it is okay that's plenty good so I think what I want to do to demonstrate promises and a sink and a weight is well first of all let me get rid of some of this stuff here that I don't need I kind of figure out where this sound is coming from hold on I'm looking in through a crack there's people watching a movie in this room who knows let me just look at the schedule it's on the door ah from 9:00 to 5:00 every day in the summer session is the fundamentals of filmmaking okay so so much for my plan that that classroom next to me would be empty all this time okay oh the camera went off yes thank you I hear that there were I heard that there were some comments in the chat about the sort of poor sustainability of me using all these paper towels and I agree I will I'm going to make an effort to get a cloth for next time thank you for that bit of feedback okay no where are we okay so I'm back here I love that so much has to be exploitive it's people watch it for ya so first of all you get to it eventually also the camera shut off every once in a while hi my apologies alright this is fine I'm gonna leave this here so I'm gonna go to terminal oh look at this and I'm going to do I'm so I'm just gonna get myself set up here and I'm going to create so we're gonna call this promises one and then I am going to in the most ridiculous way I'm going to open up everything in a text editor I'm going to use the atom text editor and boy that was weird I'm gonna go into promises one I'm gonna open that up I'm gonna get rid of the live fixed oh you know I should do this right now does anyone know anyone who's used anyone has used as anyone used p-5 manager and know where the template files are stored let's actually figure this out so where are my node modules on this computer they must be with those right so it would be in something like user well let's just do this and being like user in lib somebody will tell me Oh update the P Phi I don't want to update the p5 library I want to like completely change the template for my project when I make a new one where does node get installed where do noble node modules get installed MPM list user local Lib node modules ok let's try that user local Lib node modules p5 manager let's see are there template files in here right so so now templates this must be it right index so I would think if I adjust these yep this looks good so what's index bundle versus index oh I want but while bundle is the thing that I use so let's use bundle and what I'm going to do is I'm gonna do p5 CDN I'm trying now to also use now that I'm gonna do twice a week live streams I'm trying to take some time to get myself better organized and have a better workflow not that I have such a great one but I'm gonna do my best so I'm gonna copy this and I'm gonna copy oh no I want to use the minified I'm gonna copy the well I think I can just say p5 dot min and then I wanted to get the Dom and I don't want to use the sound library I don't want to have any of this extra style stuff so that's good so I'm just adjusting my p5 manager template which generates the project and then for sketch touch yes I like to have just like a small window and I don't even want to have a draw function so that's what I want is my template so now if I go to the desktop let me delete this folder let me close everything here we go back to terminal let me actually make now let me go to the desktop let me make a directory called promises go into promises and now let's try to generate a new p5 project what's gonna add all those libraries I'll just delete I'll figure that out later p5 G - B promises 1 let's see if that works and I'm gonna say Adam and open it up in Adam and we're gonna look at this sketch ah there's my new default code this looks small to me font size wise is it okay and that's perfect and now I just need to delete this folder so I probably should change p5 manager to not install that libraries folder but okay great so that's good now what I want to do is run a local server and okay and I probably should put in my template actually background zero so I can when I first run and I can see that it's there and working great that's definitely not a small font size I'm told thank you all right so now here's what I think I'm going to use so what I'm going to use to demonstrate the idea of promises is I'm going to look at pulling data from an API and I think actually I had a discussion in the slack channel about and people gave me lots of good suggestions about api's to use and I think I'm gonna use one that we didn't even discuss which is word Nick so if I go to my course my ITP course called programming from A to Z oh no it's not which will be taught again this fall and I go to week three api's data I'm gonna just go to word Nick random words and I'm gonna grab these okay let me just get random word okay so what I just want to see here to start with is I'm gonna say load JSON random word now I haven't actually launched into the tutorial yet I mean this is the true so in case you haven't watched before I take these edited lie these live streams and edit them into smaller tutorial chunks I say I not sure helps me do this who works on channel management for the coding training and it's you often during these live streams I go to like performance tutorial mode I'm not there yet alright so then I'm gonna say got data and I'm gonna write a callback function called got data I'm just gonna say console.log data I just want to make sure this works to grab something from great so I got every time I run this I get a random word and I'm actually gonna say no canvas and I'm going to say create P got data whoops no create P data dot word and maybe I will make a button the button can't doesn't work with a promise but that's fine let's not worry about let me not go any further than this okay so every time i refresh I get a random word from word Nik and just in case you're wondering I give it a minimum length of 5 letters so there's lots of other things I could give but that's it okay our IP is s oh I forgot about the International Space Station API why did I say I didn't want to use that the good thing about that is anyway all right let me think here so now here's the thing I think to effectively demonstrate promises I don't want to buzz market my coffee by accident they're not a sponsor I'm drinking my coffee over here usually I'll make my own coffee but today I purchased a coffee not showing the logo of the coffee so people are asking in the chat so what I have here so far is a p5 is a is a JavaScript this JavaScript code it's going to execute in the browser and it's dependent on the p5 library in a moment I am going to show how promises work and to do that I'm actually gonna switch from using the p5 library to a function called fetch which is native to JavaScript and actually just to be sure let's check some let's just make sure works that returns a promise oh all right but anyway that works I I'm not gonna I'm gonna sort this out okay I have to talk about promises are okay what time is it now 11:30 yeah we're okay we're okay all right so the thing that I think that I need to demonstrate this yeah that's actually so Alka that's Alka writes in the chat the ISS API doesn't have HTTP support and that's actually one of the reasons why I don't want to use it because I was getting all these errors it would work because I'm doing everything locally but when I tried to put the example in code pen and different things I was having issues so what I want what I need is I need to be able to demonstrate sequencing so let's say I get a word from word neck maybe what I want to do next is get its definition so let's try to let's let's sort that out as well so where's the word word neck API I mean I'd almost love to go to a different whoops a different API just to demonstrate that idea like oh I could go to giffy let's go to the gift I and get a gif associated with that word that's perfect okay so I have a gift vapi tutorial I want to use things that I've used before so coding train website where is the gift fee so I need to find I need to find probably under tutorials under p5.js sound video would it be here eight data anybody can find this faster than me let me know I think it's nine giffy no ten yeah here we go Givi api so this should let's grab this so I don't need and simplify this call this giffy hold this random word giffy and I think to be honest with you I'm just gonna simple I should probably rename these something better a word Nick API giffy API let's just do this so if I get a random word then I could just say lo JSON jiffy API plus plus the plus the plus data dot word and then say got data data and then create images console.log that so let's see here random your word URL is not defined and then this here is where okay so I need to get data index zero where's the just the like URL for it would it be this embed URL that's what I want no to create the gift as an image I think maybe just URL let's try that so data data so create create image data data index zero dots URL let's try that let's just look at this okay one more time let's try that didn't work okay so but yeah I'm naming things poorly on purpose slug images Oh images ah this is what I need down two images dot images this should are they all gonna have this foreigner II with still dot images dot like this whoops let's try this No images let's see if this is this right Oh dot URL let's try this there we go okay this is a problem this is gonna be a problem okay I want to see the word still and what's the smallest version of the gift fixed-height small yeah let's do that and if it doesn't get anything Oh oops No oops almost ready to tackle promises this is fun so I need oh but I this is perfect cuz I'm gonna get to demonstrate catch when there is nothing oh oh this couldn't be better okay alright so now let me let me rewrite this in a different okay alright I'm ready for this now so the next thing I want to do is open up promises open up promises I want to just go here I'm not gonna write my own promise I'm just gonna use the promise there's no pending fulfilled rejected okay I'm just remembering these things then catch all right all right we're ready everybody I'm just trying to get a good well that wasn't good one flowerpot okay perfect looks if this gif isn't very good that's fine all right is everybody is anyone still watching it's been how long has it been 40 minutes and I'm now starting to do a tutorial this is too much fun I'm just waiting for the coding train to come a gift to come up by accident I should probably let it be less wheat but let's let the words anyway alright I don't know why I'm obsessed with with like I need a good opening gift no no oh boy that's not good either elderflower how is this a gift for elderflower oh my God my broken elbow I swear I'm gonna pick one of these I can sickly seahorses okay perfect all right we're good we're good we're good I understand why not everybody's just not just clicking the sponsor button how do i Christian a saying want to filter on PG rated gifts I would like to do that but I don't know I don't know how to do that in the it does anybody know how to do that really quickly in the in the API here yeah I know this is I really live it on the edge with this tutorial oh boy I promise you alright nobody's giving me a tip so I'm just gonna live on the edge rating equals G okay is that really correct rating equals G and yeah let's see if that works I think PG is probably fine oh look at this oh it couldn't be more perfect alright okay here we are we're gonna disfigure to do this I'm gonna cycle the cameras hello hello I have a promise to make sure by the end of this video I am hopeful that you and I together will understand what the how this promises thing is in JavaScript because me I'm a person who programs in JavaScript with callbacks but there has been for quite a while something called a promise in JavaScript and it used to be something that was part of certain libraries that you could import and add to your code now as of I think es6 which is es2015 whatever as of a more recent version of JavaScript promises are something native to how JavaScript works so I hope this video will answer the question for myself as well as you why should you care about this what is a promise and how do you make use of a promise so the demonstration so I have a JavaScript program already running it and I think a good way to demonstrate this is to look at making requests for data from api's so I am making a request for a random word from the word Nick API and then I am asking the giffy API for a gif associ of that word so if i refresh this page there we go i refresh this page again there we go so this is the demonstration I'm going to use now that at present the code for this is using the p5.js library with callbacks there are no promises involved there's a load JSON function that passes in the URL to a particular API it has a callback for when the data is ready then I get that data and then I go I ask load JSON again with another URL and then I who then I have another callback oh my goodness so here's the thing I don't know why I'm gonna walk over here but I'm just going to a callback really makes sense for this idea of an event right when the mouse is pressed trigger this function it's an event but if I want to sequence asynchronous things that happen my program meeting I'm making all these API requests I'm asking for this I'm asking for this and then when this comes back I want to do this callbacks can get very unwieldy and you can actually find yourself living in what's known as sound effects please call back hell so I'm going to show you right now call back hell now I've written this in a weird sort of way where I call low JSON okay that's just way too distracted where I call low JSON and then but you might be you might imagine that you use anonymous functions so when I call low JSON instead of having this separate you got data function I'm gonna take this up here and I'm gonna put this in here why is this so and then I'm going to I don't need it to be a name I'm just gonna pass the call back in here directly okay so this is perfectly normal to do up but then when this one when I then ago to the giffy API then I'm gonna I need this next anonymous function and I need that to go in here I don't want to name it anymore it's an anonymous function and there we go so now let's refresh this and it still works homeward bound oh there is no what's great about this is this is going to trigger an error sometimes when it can't find an image and I'm gonna need that with promises I'm need to figure out of handling errors so look at this this isn't even that bad this is fur but but look how this is just not sustainable first of all I don't like how much room I have here this is absolutely not sustainable I won't up load JSON have this callback then load is and of this callback this King I could just keep going with this and all of a sudden you can see my code it just gets indented and indented and indented more this isn't good could there be something better I don't know I don't know really if it's better or not but there is something and that something is called a promise a promise is an object so the idea of in so let's say so we have this load JSON function which expects a URL and then a callback here's another reason why we could get stuck in callback hell we might need multiple callbacks for different things like an error callback and then word that our code is even more unwieldy because then we have these sequences and we have different things for the success callback so this is what our code looks like with a callback now p5 at present doesn't support promises but if it did instead I could say something like this let promised equal lo JSON URL so the idea is instead of passing a function a callback you ask a function for a promise so because the p5.js library doesn't support promises and I am here to teach or learn which one I'm not sure yet about promises I'm going to instead use a function called fetch which is a function native to javascript in the browser that supports promises so this gives me a promise once I have that promise I have it as an object and I can do all sorts of things with it but the idea of a promise it's an object that can be in a certain state so the possible states are well wait a sec you look this up I know it's like rejected or accepted I don't know if it accepted as the right word let me go look this up wait why are you saying John oh whoa John oh yeah because you my brother's name is John okay so I forgot the no one will notice this right I know it'll ever notice that hello John on the whiteboard okay wait I need to look up what are the was I gonna say what's doing so well resolve resolve is the word I was looking for okay and then there's also it can be pending or come fulfilled okay so the state is pending or fulfilled but the result is rejected or resolved okay I think that's the way I understand it all right pending fulfilled and rejected whoa whoa so hold on help me clarify this people of the slack channel or in the or in the YouTube chat which I'm trying to trying to keep an eye on I get the idea of pending or fulfilled it's in progress or its completed to me I understand those are the states and then when it's fulfilled its either rejected or resolved is that correct I don't need resolve or reject that's for creating promises right right that makes sense one of those three pending fulfilled and rejected fulfilled is I see so fulfilled is the same as resolved essentially okay okay that makes sense see in theory it's helpful for somebody doesn't actually know this stuff to teach the stuff I don't know fulfilled a success or rejected as rejection okay great there's a nice graph if I scroll down there's a graph ah here we go oh good we'll come back to this well I don't know I only care about this okay okay so Matthew you can figure out how I'm gonna back up in my speaking and you can figure out how to put this together a promise can be in one of three states it can be pending right this is while I'm waiting to get the data back from the API it can be fulfilled which means it's it's been successfully resolved I have the results back from the API or it can be rejected meaning some error has happened so if I have this object the idea is that I can just check this object to say wait hey object what pay promise everything's fine I just dropped the top of the marker I have this problem I have this promise I promise you promise me something are you still pending I'm waiting for you to finish promise are you pending and then I could say like hey were you rejected were you filled and then give me the stuff back but here's the thing if I do this I actually don't need to query the promise continuously I can use something called then and/or catch so then is a function that gets executed is that the right way to say it is it really a function that gets executed no because you have to pass a function into it yeah then is a function that receives a function to be executed it's kind of like a callback when it has been fulfilled and catch receives a function to be executed when it has been if and when it has been rejected and there's actually if we go back if we go to the Mozilla JavaScript documentation page there's a nice diagram so this idea of a promise it's pending and you can see all this stuff that happens but in the end there's just a then or a catch settled if it's either sorry I'm reading the chat yeah I should say resolved so I've read the chat shouldn't be reading the chat well I'm doing this alright so this is the basic idea so what I'm gonna do now is I'm gonna start to rewrite that code using promises now I should be explicit about a couple things number one is I am NOT creating I can write code that creates promises I can use them and I'm gonna get to that I'm not doing that right now what I am doing is using somebody else's function that returns a promise so I need to get to creating your own promises and I'm gonna make lots of promises we gonna keep them all and then the other thing is I need to like to see does this really help us does this really make our code easier to follow and so let's just sort of see so let's let's go back so first of all let me just show you where this function called fetch is coming from so this is the fetch function and basically fetch is just a function that you give it a URL and it fetches the stuff from that URL and gives you a promise back so I am going to I'm going to comment this out and I'm gonna say let promise equals fetch word Nick API and then I'm gonna say console.log promise so I so let's take a look and see what this is look at that and at the moment that promise is pending look the promise is pending now here's the thing let me make I'm gonna do something very silly which is actually let me do let me do this in let's do another one here let P equal Fett let's do this again just in the console and let's look at that it's resolved like a few moments later it's resolved right so at the next line of code so I could do something crazy like while promise is not resolved wait wait wait wait wait wait but that would be like blocking code the point of a promise is to handle asynchronous things my program is going to keep going but behind the scenes it's going to be waiting for that data and the way I do that I don't think way too much time to get to this is with the ven function so watch this if I say promise then and then I put got data in here and this is nobody would ever write JavaScript like this I'm just doing this in kind of a crazy way and then I will condense it down and then I write my got data function let's run this and so take a look at this looks a little weird let's run this now so I got oh yeah I forgot all this is great I forgot the fetch function at some weird properties which is going to cause us a bit of a problem which is why we need promises so look at this I actually so you can see I got the results back but actually the results have to be converted into a format that I can use so all right so first of all so this is the idea right and if there was an error I could say promise catch got error and I could say console.log error all right so now let's make it have an error let's like mess up the URL by accident and we can see I got an error there type error failed to fetch so you can see this is the idea I get a promise I can give it a function to with then for when it's successful and I can give it a function for when there's an error I forgot to mention that I'm gonna start probably using the JavaScript arrow syntax in the course of looking at promises because it's really helpful and it's many ways necessary for working with them effectively so if you haven't already watched my video or somebody else's video or tutorial about the JavaScript arrow notation which is this notation I would suggest you pause and go ahead and watch that and come back okay so how would somebody really write this code well most likely you don't need to create this variable call to promise and then say dot then really most likely what you're gonna see is just saying fetch and this is called chaining almost everything in JavaScript is chained meaning I'm gonna do this function and chained it with the next thing I can say dot then got data dot catch got error so this is more likely how you're gonna see it written and let's just see do we still get that we still get that error and then if I fix it now we can see we've got that response back correctly okay now how would I really see this most likely I would see this with the use of anonymous functions so this whole thing would end up in here without a name and then this whole thing would end up in here also without a name this is starting to maybe look a little better and you might even see people do this so the because here's the thing there's going to be a lot of sequencing and what promises are going to allow me to do is really nicely say dot then dot then then not then so I can create this sequence of callbacks more easily now here's the thing if I want to clean this up even a little bit more I might want to use the arrow syntax and once I use the arrow syntax if I just have one line of code I can simplify this let me make sure I have this right and then I can do this did I stop talking I have to concentrate and this doesn't need a semicolon whoa I made this confusing but let's just do my best here all right so let's just make sure this still works and then let's look look at it again okay it's still working so look at this this is starting to look kind of nice it's confusing this is not for the this is not for your first day of programming but I now have fetch which returns a promise and I can also because I only have this one I can do this I can get rid of these parenthesis and I could also the truth of the matter is I could actually just do this now say console dot log because I'm giving it a function to console dot log that stuff but I'm gonna I'm gonna keep it like this just for my own sanity so now I have this fetch which is query from an API then it's asking for the data and then then it's tape making just give me a second here I have this function which returns a promise and the promise is handled when it is fulfilled the data is console logged when there is an error the error is console.log that's what I have so far right now and here's the thing well I want to I want to actually get that word like I want to say data dot word but that's undefined so this is the funny thing about fetch if I go back to the documentation page for fetch I need I'm looking for the function called JSON as their hold on hold on if I go to the documentation for fetch and go under use using fetch yes here's the thing you can start to see that there's something like what I'm showing you here but there's also this like dot JSON so the thing is the thing that's coming back from fetch I have to ask for it to be converted into an object that I can use and that's with the dot JSON function so let's look at how I would do this so here's the thing the dot JSON function also it returns a promise so what I really want to do is this I want to say when the data comes back call dot JSON and then guess what so this is really the response convert that to JSON and then take the JSON and console.log log that which is like this alright let's take a look at this so now you can see how my sequencing is much easier to manage I don't have callback L I actually just have the things that have to happen one line after the other boy this is tough stuff whoops there we go and now you can see I have that were and now okay so let's get a little bit better here because what I really needed to do was call my create P function to make that paragraph so I'm gonna do this so let's take a look at this let's just put that in there now and there we go every time I read so now I'm using promises I'm using fetch and promises okay now I want to next go and try to request a gift associated with that word how am I going to do that now first of all I need to now this is the thing remember with the JavaScript arrow syntax what this really is right here this whole thing right here if I were to rewrite this it's this function JSON create PE right this is just this shorthand but if I want to now ask to fetch the what am i fetching the giffy api if I want to do two if I want to create the paragraph and then fetch the giffy API I no longer can be as short handy I need to put the brackets back because I have two lines of code I need to put those brackets back and that means a parenthesis needs to go here right [Music] why did this auto format back to here I might have a linting errors timeout is it because I forgot a semicolon here no I want this to autoformat to this why didn't it I'm waiting for someone to is that just damn I do I actually have a syntax error or oh yes this is an extra parenthesis there we go thank you okay right hmm this doesn't look right to me and it's because I have an extra parenthesis here where there should be a semicolon there we go so I have to put the curly brackets back in then I can have two lines of code here right so now first I want to fetch the word Nik API then I want to take the response and convert it into JSON once I have a JSON I want to create the paragraph and then fetch from the giffy API so what do I want to do now then the same thing then take that response and convert it into JSON then and then the JSON I'm gonna do this I need to just whoops then with that JSON all I need to do is create the image so I can get that code I had before this is creating an image object and you know I'm not going through how the giffy API works but I in the giffy API I get did I get the JSON data index yeah I get the first gift that's fixed-height small and it's URL so look at this now again this is not so super I mean this is very concise and it's difficult to understand but you can see how nice the sequencing and I'm sure I know I have some errors here but let's at least see how far we get let's see how far we get all right so good news I got the word sketch digest 18 JSON of undefined 18 wait why does that say 18 let me join this again skep 14 sorry all right so ah so here's the thing promises are chainable right what are the things that return a promise fetch returns a promise which is here rasaan also returns a promise so how come if this returns a promise this worked but this returns a promise this one didn't work well here's the thing you have to explicitly in this chain of promises say return to continue to chain all of the VINs so I actually missed saying return here and the truth of the matter is I really should say return here but if you remember from my and in lemon I just put this in just to have it everywhere but the reason why I didn't have to put it is when you have just one line of code it with your arrow syntax it assumes the returning but this is now really what this should look like right and let's just make sure this works Oh syntax are lying 10 there's an extra parenthesis there know what oh is it like just as needing a semicolon there no oh oh that's weird I guess I have returned I have to have this weird I have to use the curly brackets yeah let me go back much I don't know if this yeah let me go back okay whoa so if I have to return the promise in order to have the next ven sequence properly how come I didn't have to return the response dot JSON promise up here well it's just because I'm making use of the arrow syntax shorthand so I think I want to just remove most of the shorthand here and add back in the curly brackets and say return so and then what am I I need a parentheses here and then also now this is more long-winded than it needs to be but I'm gonna add back in the curly brackets but I just want to emphasize and I've already made another mistake there we go so now let's see can I fit this all in one page here so now look at this now if you if I showed you this at the beginning of this video you would look at me like oh my god you're crazy that makes no sense to me but I'm hoping maybe maybe this is somewhat comfortable for you maybe you have to go back and watch this video again maybe you never want to watch another video in my channel ever but I'm starting with fetch and getting a promise then I get a response back and I'm returning the next promise about converting it to JSON then I am returning the then I'm then I'm getting the JSON mmm adding the paragraph and asking to fetch more data once that promise gets resolved I take that result returned into the JSON once that's ready I take that JSON and make an image and then I'm done now here's something that I didn't mention that's so magical about all this each one of these things an error could happen along the way it could break because either one of these URLs could be wrong the data that comes back couldn't be formatted right in such a way that I could get it back to JSON this catch will catch any error anywhere throughout here so any error happens anywhere it jumps down to here this is much nicer than having to have separate error callbacks for every single thing that I might be doing in a sequence like this so let me now let's hope this works this is time for me to use a drumroll let's see if this works this has been a long video I think there we go it's still working nope no no that's the wrong one no no really sound effect challenge so there we go so I'm just gonna now now that we see this full sequence here I'm gonna go back and remove I kind of like using the in once I'm already using the arrow syntax you know if I wasn't using the arrow syntax then I wouldn't care so much but once I'm already using the arrow syntax I'm once I'm already using the arrow syntax I like to I like to have that shorthand when possible because it does make it easier for me to follow the code so I think and I think I'm gonna keep the curly brackets here because this is kind of a long thing to do so now we can see and again there's a little bit there might be a there might be some other simplifications that I can write to this and there's a lot of extra steps just because of the way that fetch works but this really shows like if I had to do this without promises this code would become really unwieldy and difficult to manage and write so I think I've done at least with this first part what's coming next so I need to show you how to use something called promises dot all I think so if I want to create like a big array of promises I can wait and have something happen when they're all complete that's thing that's worth showing you another thing is let me make a list of this stuff whoops so can I come over here so I need to show promises all I need to show how to make your own promises how to make your own promises I'm gonna just title the video how to make your promises and maybe people who don't know learn a certain code would just want to know about how to make your own problems how to make your own promises how to promise safai something and then then we're gonna look at I could actually really simplify how this code looks in a really nice way I mean you know you can actually skip all of that entirely if I use and this is a part of like yes 427 no it's a more recent version of JavaScript called a sync the async and the await keywords so I'm gonna show how those work and that's gonna even simplify what we did here further now I might be forgetting something that's important in this list and when I come back in the next video I will add to that list as well okay thanks for watching I hope you learned something about promises a little too long and this was helpful to you alright so how did I do how did I do everybody those of you who actually know and if you use promises regularly did I this is pretty like correct yes 1215 that's probably gonna be like a 45 minute video isn't it oh no plus marketing my coffee the last changes work oh my goodness yes oh that's a really awesome one okay somebody in the chat says there's been a mark on the top right of the whiteboard that you have that's been there for four weeks oh well we must fix that no no I'm not gonna get another paper towel I'm gonna reuse my where did they go okay here we go top right oh this all right okay everything's okay with the universe again all right so now here's the thing how's my list is there anything right if should I just go straight to promises dot all and like do something where I ask I mean obviously the word Nick API I could get five I could get probably get five random words with one call but I could create an array and then use promises dot all I've actually never used promises not all but that that's probably what I should do next right and then I should write my own asynchronous function that creates a promise like I could promise a PHY load JSON in p5 right would that make sense to do that's what I'm thinking give me some feedback on that then you know I'm gonna I'm gonna go until one o'clock so I've about 45 minutes I guess I won't get to a sink and a wait today unless I come back later this afternoon or something actually what time do I have no I have something yeah I have to go buy one well after one right I don't need this so this is a good point so alka writes in the chat I don't need the quotes for this property but the reason why I had if there was because originally I had some some property that started with a number but it's fine that's all I got not a key details I'm not too worried about that promise trace do async in a way making your own promise isn't that necessary oh that's interesting so far it just seems like then hell instead of callback hell hey welcome new sponsor Abhilash manaan thank you I love how that just like alerts me the sponsor it's really nice yeah Kate weak man makes a point saying so far it just seems like then hell but but truly it's yes I see your point but here's the truth of the matter is the fact that I don't have to indent any further with any of these makes it less hellish the callbacks have to be all nested inside of each other they can't be written as a list and that results in I didn't do a good job of like showing callback hell oh look at this there's actually callback hell calm so anyway so yes it flattens it that's the nice part yeah a sinking a weight or promises underneath exactly there's no fetch function in node that's a good point yeah major difference also between callback hell and then hell is error management writes David Davis all right now so let me ask I'm gonna do promises all look at all our orcs nobody nobody tell anybody that I'm just looking up how this works right before I do the tutorials I've never actually used it Oh interesting set timeout as an example oh oh I just give it an array oh cool all right all right so yeah let's try this let's try this what is this from anyway oh yeah look at this I never made it get an error but at fetch vendor okay no it's not only about indentation but if you're like me that's kind of the array doesn't have to be all promises that's interesting I don't know what that means use a short word a medium word and a long word something it can't be done in one call yeah I agree with you in principle alkanes make a suggestion to you to like have three different yeah let me try it that's actually not a bad idea and it keeps the order from the input array good point good point all right I'm gonna do that thank you that's a great suggestion all right let's move on to promises all all right anything that it's not David rights in the chat anything that's not a promise in the array will just get returned as if it were resolved by the promise that's cool console dot error air for errors please is much nicer that is an excellent suggestion also board Eve of which I'm bored of all I probably be ass pronounce the name okay all right so let's statuesque Lee what the I'm very concerned about whoa that is crazy oh this is Oh David Bowie oh there's an I don't know if you were live in the New York City area I would highly recommend oh yeah no this is such an aside but I went to the David Bowie exhibit at the Brooklyn Museum which is really fantastic they did a really nice job at the audio tour in particular but one thing I learned and is that David Bowie actually implement a piece of software called the verba sizer and it was like a lyric writing generative text app and they had it actually running at the exhibit and I wanted I want to do as a coding challenge to recreate the verba sizer so somebody remind me of that or I don't know add it as a rainbow topics thing or something but not right now all right just okay all right now it's time for us to keep all of our promises so uh if you're watching this I just made a video about JavaScript promises so if you haven't seen that one you might want to check the video description go back and watch that one first and in this video what I'm going to look at is what happens if I make many many many many profits I put many promise rings all over all my fingers and I want to keep all of them promises dot all what is this promises all thing so let's so we're promises that all can become really useful let me give you an example a lot of API is that request data from UM have this sort of pagination quality to feature which you say give me they don't give you like if you want a million results from an API you can't just say give me a million things you might say give me the first page which has 100 then the second page which has 100 and so on and so forth and you want to like do something once you've gotten all of the data now you want to keep everything in the right order this can be really tricky to do with like multiple callbacks nested callbacks callbacks hell but promises has a feature which allows us to do this quite nicely so I have what I made in the previous video is an example program that asks for a word from the word Nick API then it takes that word and goes and asks for an gif associated with that word from the giffy API and you can see the code here is making use of promises and is sequencing actually all these promises so I could probably use promises at all in some weird way with this but thank you to Alka from the chap who made a nice suggestion what if what I'd want to do is I want to get I'm just gonna do this in a simple way I want to get three words from the word Nick API I want a word with three um am I doing here what if I want to get three words from the word Nick API I want to get a word with that's love length 3 of length 4 of length 5 so I'm going to and so let me actually pause for a second I'm gonna match you I'm gonna double back I want to freeze this code the way it is and I want to say promises all so I'm gonna do this Oh 102 okay so just don't save unsaved what just happened there oh oh I don't have my David Bowie anymore alright that's fine just go but I'm gonna go from where I tabbed into the code and you can see the code here where I have this sequence of all the different steps each returning a promise and what to do when that promise is resolved now I might be able to do something where I use promises at all even with this but I'm gonna do a different scenario thank you to Alka from the chat who suggested this so what I'm gonna do let's get rid of for this let's get rid of the giffy API as fun as that might be and let's just go back I'm gonna simplify this and right now it's just gonna show me a single word meta sulfites blue toid by some great words here so now what I want to do is I'm gonna say word Nick three word Nick four word Nick five now this is silly I could make an erect there's so many things I could do to make this better but I what I want to do is change the minimum length so minimum length is three maximum links is 3 4 4 5 5 so I want to get three words of different lengths and the reason why I'm doing this is I want to show you how I can get all of these API calls and retain the order of them which is really helpful when you have like all these nested callbacks you don't know what's happening when so this is gonna make our life much easier alright so now let's just make sure this is still working with word Nick one oh no three sorry there we go AB so what I'm going to do something very silly is I'm actually first just gonna copy paste this two more times for four so you can see but it's not coming back in the right order look at this sometimes the four one two three four why they're two four-letter words I must have messed something up but it's really not coming back in any consistent order that's weird oh I forgot but five here so it's not coming back in any consistent order which is a bit of a problem I want to be able to keep that order so one thing I could do is first of all I could I could I could do it this way so once I get the first word then I'm gonna say return fetch word Nick for I could I could go back and change thing oh my goodness so I'm gonna just rewrite this a different way right I could say give me the word Nick three create the P then go do word Nick four and then do this again and then do word Nick five and then do this again right this I could do right start by getting the first URL then when I get that go to the next one when I get that go to the next one and I often have a return to return the next promise so this is a way that I could sequence all this stuff now you can see it's actually coming in one at a time right so it's waiting to make that API call until then previous one is done now here's the thing I know what if I don't want to wait I want to just make all these API calls make these API calls make these API calls make these API calls I don't want to wait and then I just want to like display them on they're all done so I don't want to see them like coming in sequence like this this is where promises doll can really help us confess I've actually never used promises that all me names at once for making this video so I kind of gotta have to figure this out so let's think about this the idea of promises dot all is that what I want to do is I want to create an array of promises so if I have I'm just going to sort of speculate here if I have an array of three promises I can say promises dot all give it that array and then I can say that then like results let me just type this out here and then I can also I always have my catch error and people are telling me to use console dot error error should have it like look nicer I can have this and I'm missing a parenthesis there there we go so the idea let's move this down here this is the idea the idea is that if I create an array of promises I could say hey all of these promises when they're all resolved then show me the results and key show me the results for all those promises in the order that they were in the array which is really key ok so this is how it's supposed to work I think timeout pause for a second because I see some suggestions coming in the chat fetch fetch fetch all right the problem with this is that I need to I have the extra JSON step so how am I like for example all right so let me go okay so what's the next step I mean the idea here is that all I would actually need to do is all of these return a promise so I could say hey make these three API calls and whoops let's hold on zoom out here what's ah missing a parenthesis sorry everybody so I let's do it let me do it this way just I just want to be like super explicit about what I'm doing here so what if I make these three API calls and of course this could be in a loop and all sorts of things and then I make this array that just has all three of them in there now I could say so this is going to actually work I'm going to comment out what I had before this is actually sort of going to work but not exactly so let's see what this does this is the idea I'm gonna make three requests I'm gonna put them in an array and then it would say when all of them is done show me the results let's see what happens oops promises is not promised at all promised at all not promises done all promised at all and there we go all three of the responses are there so this is actually good it worked the problem is fetch has this weird nuance to it so if I weren't using fetch I could almost in a way be done with this video-tutorial but because I'm using fetch if you recall when the promise comes back I need to ask for that I need to create another promise to convert it to the data that I can actually use so I think this is where a higher order function could be come in useful I hesitate to do it this way I could use it then with each one of these and create the other promise but let's let's think about this I think the higher order function might actually be useful so if yeah if you don't know about higher order functions these are functions that I did a whole video to robot what they are now I'm kind of forgetting but they're functions that actually generate new functions for you or take functions in as an argument and so one of the ones with an array is a map is that my function called map so the map function is a function that would allow me to pass a function to execute a function in every element of the array so I could say promises dot map so what this would do like let me just show you what I mean by this I'm gonna comment that like what this would do this order function I'm using the arrow syntax you can go watch the video where I go over this explicitly takes every element of the array and then execute the code console dot log element on it so let me show you that and we can see there's three promises so what can I do I should be able to say make a new array so I'm gonna call this promises to map makes a new array so that's weird that I did console that log that's kind of a silly thing to do more likely what I would do like with the point of using map let me just show you really quickly in this video like if I have two three four actually let me just do this in the console so bear with me for a second if you already know what map is skip ahead thirty seconds or a minute so I'm gonna say nums is four three one five nine that's an array of numbers can you see that I'll make it a little bit bigger now if I say nums dot map n becomes n times two what this does it makes a new array with all those values multiplied by two but nums is still the original value so I am creating a new array with a modification of all those values so I can do something and again you can go back and watch my other video which goes through this in more detail but now I could do something very similar here I can make a new array of promises like this but do I have to wait till it's resolved I might have to wait till all of these are resolved let's see let's see if this works console.log promises I think this is gonna give me an error let's see if this works I think there's a missing step here this asynchronous stuff is very confusing because I've got this is the right idea conceptually promises not to find well this is promises one ELT JSON is not a function yeah so I need to get the reserve the resolved promise the response from the promise so I guess what I could do here ah aha thank you to Alka the chat don't forget it saved me here of course this is a promise so what I need to do is execute the function dot then on it I need to wait for it to be done and then what I can do is take that response and convert it to JSON oh boy this is this I don't like this hold on back up for a second I have to think about this Paul not sure that's that's no good yeah yeah I mean so that that would work but I wonder if it might make more sense for me to actually just do promises all twice boys it's getting no or I think if I if I think actually if I write it out as a function it'll be more clear Oh me I am Samia is why not my one-liner I didn't see your one-liner oh oh my goodness Matt fetch map eggs use a for-loop a for-loop oh yeah good idea yeah no need for high order functions that's the point with all you should close your tutorial now all twice is slower get twice as much promise doll has a tutorial this is really confusing I use es6 everyday and I know that es6 contains classes okay that's not hello Daniel make a list extract stuff and listen I think yes let me not go down the higher-order function route if I'm keeping this simple I should just make a for loop right yeah I think I'm gonna do this with a four loop to keep it simple where do I need to go back to yeah that's what I want to do me I am Samee that's exactly right I'm gonna do this without a higher so that's yeah let's see if we can make this happen let me do this without the higher-order function thing and but I'll mention that you could do this as a higher-order function maybe I'll show that our leave that as an exercise so I want to back up I believe there was a point where I just had this yeah okay I'm not using a for each loop don't don't try to don't try to trick me okay so ordinarily I might be done here because I have my three promises they've all been finished and I'm looking at the results of all those promises the issue is the fetch if you recall has this extra weird thing where when I get the response back I need to execute an I need to have another promise to convert that information to data that I can actually use which is that dot JSON function so what I actually need to do is take this array of promises and make a new array of promises with all of the conversions to JSON and I could do that with like the map function which is a higher-order function check out and watch my higher-order function video tutorial and maybe I'll do that later or just leave it as an exercise but but let me let's do it this what's do it a simple way here so let's call this promises one and then I want to have another array called promises to and I could use promises not all twice but let's not do that right now let's say promises to is an empty array you know I'm thinking about this so I'm gonna say for every promise I'm gonna use a for of loop of promises right this is saying take everything in this array and what happens when you have a promise when it's resolved I say promise and then I get that response this is exactly what I have down here right response I can take this I get their response and instead of and what I want to do is respond stock JSON returns a new promise so what I want to do and I'm gonna add the curly brackets here so I have more room to kind of work with whoops what's missing here why is this not oh there we go okay so now what I want to do look I got this formatting is confusing but for every promise in promises then what I want to do is get the next promise and put it in promises too so what I'm gonna do is I'm gonna say console.log promises to now weirdly enough I have a feeling this is gonna show me nothing let's see let's see what this does Oh promises boy this is really starting to look like that spelled incorrectly the more you look at a word promises one Oh promises one that's the promises one okay now look at this this array is empty but it's actually it's actually in there the nice thing is it's empty because this these then is happening asynchronously and I'm console logging it here but I think I'm actually going to be okay because once I use promises all so again let's and I put in promises too I think we're good now let's catch 924 No all right wait No oh oh I've done something bad yes I've done something bad I see I see I made a mistake I made a mistake oh I was doing so well today till I Frenchie promises not all I need to actually yeah okay ah I know what I did wrong I just trying to figure out where to back up - yeah it's empty no this is all gonna be fine all I need to do let me just show you how it's gonna work this will actually get it to work amazingly I'm just trying to figure out no I thought this would get it to work oh no no no no no that's not going to fix it wait oh yeah next promised he was on such a son yeah of course ah of course this is what I need to do I just totally did this wrong let me make this work and then I'm gonna back up there we go there we go alright this is what I needed to do it's actually much simpler than what I did this makes a lot more sense okay Oh back hurts like I'm hunched over today alright so Matt's yeah you once again I'm gonna back way up or I could go down that road and demonstrate what I did wrong actually you know what let's not back up let's leave the mistake in so this is where I was right right okay okay okay okay okay hmm so it's empty now I I have just actually made I've made a fatal fatal error and I almost wanted to like take this out of this video tutorial but I think I'm gonna leave in what I just did for a while and explain what this error is because this is really crucial so this kind of looks like the right idea right I have my array of promises then I'm going through each one and I'm asking for the new promise and putting it in the promises to array in the second when that's all done give me the results but you have I have to remember I forgotten something this is ace happening asynchronously so when I promises to like console.log promises to it's empty I actually need I need to have that array of promises I want to like get the promise so there's actually a mimei I made this overcomplicated what I actually need to do is just say I shouldn't be adding to the array here that was like weird right this is what I want to do I want to when for each one of the promises get the new promise back and put that into the next array so I'm gonna just actually say next promise equals so the next and let me let me shorten this just so we can see it this is the correct way to write this so if you look at this this is going through each promise one so I start with an array of three promises and again this could be done with Knapp to create a new array what I want is a new array with the JSON conversions of each one of those promises ah maybe I shouldn't have used fetch I made this tutorial extra complicated but this is good so what I want to do is one at a time I want to get the next promise from each one of those and here dot then returns response dot JSON as the next promise and pushes it into the array so let's just see if I got this right there we go so you can see right here I have three promises and then I have three words all in order so what I can do right now is once I have those final results I can that's an array and I can say I can say for every piece of data of results create P data dot word okay so I can now have a for loop here to deal with the array of promises that have all been finished and now we should see ah now I have the array of all promises and then there we go you know what I really sort of feel like let's I don't know why I didn't just use promises not all twice let's look at that so let's do this promises I think this is gonna make more sense promises dot all promises one then results return then diversity in the chat with a super chat rightz can you please for the next coding challenge code the lights-out game please huh I don't even know what that is but I could definitely consider it maybe I don't want to use promises at all they're all resolved oh I see so I should be able to say return I'm just going to try this promises all results map I'm just curious this should work right this should work let me just see I might have to redo this promises doll tutorial I'll have to come back and just do this again promise yeah anybody have any oh this will slow it down yeah slow mo it's a game with tiles that when you click okay thank you all right but this is how you could do it with promises that promise dot all twice I'm gonna so that was interesting let me go back okay okay okay let's try to review what just happened there and let's talk about maybe some other ways you could approach the problem this has definitely been a difficult one and if you follow this said I'm very impressed with you because I barely followed it and I made this video somehow but the idea first of all that I want to do here is use promises all to ask for - to execute some code when every single promise has been resolved all at once so I'm making 100 API calls and then I just want to do something when all that has been completed so I'm simulating this idea by making three API calls and this is awkward but I'm just looking for a three-letter word a four-letter word in a five letter word from word Nick so this are three promises and I put them into an array now I could just say promises dot all for this array of promises but I actually need to do one more step because the final thing that I want to do is get the actual data so what I'm going to do is one at a time create a second promise from each one of these and put that in a new array so this promises to array has all of the promises from getting the response from the API converted into JSON once I have that then I can say promises promise all dot the second array of promises when I get the results though that'll be the results of each one of those promises in an array in order and I can go through that array and create an add a Dom element with that word if there was an error in any of those I can catch the error down there so some other ways you could approach this problem is number one is I could use a map higher-order function I could use map to generate the new array of promises and I could even probably just use I could chain two calls to promise dot all so I could use promise all then take those results right make an array of the next promises and then do promise that all again so I'm gonna leave this code as is for your reference I'm noticing some people in the chat telling me how I'm doing this all wrong so if this video has been published maybe it's not the best but I'm gonna leave it as is I will maybe an end let me know in your comments about how it's wrong and better ways to do this and I'll try to link from here also to any other get relevant examples on github that kind of rewrite this in a different way okay thanks for watching this kind of insane tutorial on promise not all oh my goodness the slack chat I didn't notice right alright so we somebody in the chat told me I did this all wrong which is basically the active program use always just doing everything all wrong and let me say I'm scrolling back up I can't find maybe that comment got removed doesn't make sense to use a for loop for this if you have promise dot all this is kind of wrong it does work but it is not something you will be proud of definitely not proud of it that's correct there's legs up the next comment said I love you I love you too okay so here's the thing I don't think that writing any code is ever wrong it's just code and I can tell you why it's first of all it wouldn't even be right look I have three words all at once of different lengths how could that how could that be wrong so I'm actually okay with this the code wise and I think that I explain this in a way that's fine I'm going to wait for Mattia to give me feedback as to whether this could be edited into a useful tutorial or not so let me and again I'm not trying to do this in the most efficient or fast way I'm just trying to explain how these concepts work but so I'm going to so I'm definitely to be back tomorrow morning and it seems unlikely that I'm gonna get to do this today but if I have some time later this afternoon I might come back and talk about a sink and a wait I have to go now I have a bunch of meetings this afternoon so I think I'm gonna leave where I am so far with promises and I'm gonna come back so I'm looking at the chat alright so and I'm gonna come back so I'm definitely be back tomorrow so let me remind you let's let's do some housekeeping here before I go I'm attempting to do twice weekly live streams this summer except for the weeks when I'm not in town which will be a lot of weeks so my goal is to always have four sessions per month and so I'm kind of doubling up here in May and June I'll be away for two to three weeks in end of June July and to three weeks in August so so that's the plan for the summer I'm going to be focusing on tensorflow dachi s ml5 I hope you do some coding challenges as well yeah I guess I should address this fact that people seem to talk about my Lisp which I may or may not have people have lists I guess this is microphone if whether or not I have one if I do have one I think I probably do cuz people I keep mentioning it no one ever mentioned it before when I had the lapel mic but with this microphone it seems to be mentioned a lot so it's either this microphone seems to exaggerate it or bring it out a lot yeah I'm gonna try to find my lapel mic just I find this awkward wearing this microphone and kind of self-conscious about it so that's what I've done for today I ran out of steam let me see if I can answer let me take a few minutes to answer any questions I will answer questions but if you're a sponsor I'll notice your question in the chat but I'm gonna try to I will try don't break the box under your shirt they are expensive what box under my shirt I'm gonna let me put on my goodbye song and see if I can answer a few questions [Music] dan is there a Melvin asks is there a good way to manage sensitive data like API keys and open source projects that's a great question so you might be noticing that I have this API key here copy it down use it whatever I'll sign up for another one I mean don't but I'm not worried I'm this is a API key for a word Nick I use it for teaching and educational purposes if I were using this key in a production app I might not want it to be visible so that other people could use it so there are a variety of ways that this can be tackled number one is if you write your own server-side code then you can hide your API key more effectively if your API key is just there and your javascript in the browser in a client-side code it's visible you can also open source your project but not include the API keys on github for example by using git ignore and other techniques you can use environment variables on servers so there are a lot of techniques for doing that I'm choosing not to worry about that right now I suppose that might be a worthwhile topic for a video at some point mmm floor rights I had to learn promises without any documentation because nobody was making an understandable video was this understandable melon goggles first of all did you have a name melon goggles before you watched my channel can you tell me a bit more about why let is better than waar so first of all I wouldn't say that let is better than VAR lettuce just another way of declaring a variable it's different than bar it is the convention now var is from earlier versions of JavaScript let is from newer it fixes some issues with something called scope and I actually have a whole video tutorial about this var let like just try VAR let Schiffman in Google and there we go let versus var so there you go so you can watch that particular video as well [Music] and look take a look at the chat check out the ITP show video today share it I would love for people to know about ITP and see that but melon goggles you didn't tell me if this video actually helped you understand promises or if it matched up with the way that you understand promises Sean asks ever plan to get into our XJS oh no that was mmmm Fleur I got confused I don't I don't know what rxjs is Gus asks do you prefer p5 over processing if I'm being perfectly honest I probably prefer processing over p5 that's just if I like if I have to like if it's like somebody somebody came and knocked on the door I open the door and they said make me a phyllotaxis spiral in 15 minutes and I'll give you a hundred thousand dollars I would open up processing not not JavaScript but I do prefer in for some scenarios using p5 for teaching because of the share ability on the web so there are some advantages there and for the stuff type of stuff I could do with Dom manipulation but but I do and also because of the existence of tensor flow Jas I that's a nice reason as well now bill is I'm not gonna I try to avoid the shoutout or write name on the board sort of request cuz I don't know how to I don't know how to like I don't like I hate to disappoint people but I can't do that for everybody but I could write I'm writing the word nabil on the whiteboard okay I did it just for this one time over [Music] sensei asked submit should you used the NMS color bracket on a package and Adam thank you for that suggestion Oh Const I should be using Const yeah Shuba mask what do you think about the future of ml in JavaScript it's exciting to me I'm excited about it with with all the possibilities now I think there's a rich future and I hope it can be used as a way of providing access to machine learning education and getting more people to question and be critical about the use of machine learning algorithms in our siding with the social impact is Wow the battery on this sound thing see now everyone's asking me to write write write their names on the board I've got to go so I'm committing to being back tomorrow morning tomorrow morning I will cover a sink and a weight and I will also get back to tensorflow Jas if I have some extra time I might try to because I want to start with tomorrow with tensorflow Jess I might try to come back and do a quick quick tutorial about a sink and a weight um later this afternoon but don't count on it unlikely but possible thanks for watching everybody and thanks for all of your support and feedback it means a lot thank you all right so I am going to uh I'm gonna play the I'm gonna play you out let's find something we wanna make some crazy idea [Music] [Music] [Music] [Music] [Music] you you

Channel: The Coding Train

Views: 16,260

Rating: 4.9018407 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: 8R-JMcASvEQ

Length: 127min 40sec (7660 seconds)

Published: Wed May 23 2018