Promises/Async and Await in Javascript
First of all you might find yourself asking what are Promises or asynchronous functions in the first place? I know when I first heard the term that's exactly where my brain went. So for starters Javascript is a single threaded programing language, this means the interpreter can only do one thing at a time. Sometimes however a single line of code or function can take some time to complete for example a request to a server for something like maybe a picture or user information and the next line of code below that requires the result of the function to do its thing.. So now your asking yourself since i'm not a magician how do we accomplish this? There are a few ways to handle this this first would be by using callback functions, which is passing in a function as a parameter to the function that's making the call to the server and this callback bassically is telling javascript what to do with the data after it comes back. But just imagine you have a long list of things that you'd need to do after receiving back that first bit of data? Let's say for example your app needs to check if a user entered their correct password, then assuming they did you need to then redirect the homepage where you want to display the last five things they bought then send then an email with coupons for this weeks specials.. I think you get the idea this creates what's known as “callback hell” but that a topic for another article.
Now in comes the Promise. A promise allows you to chain together callback functions just as I did before but in a much cleaner way using ‘.then()’ blocks. A promise essentially is saying ‘I promise I will let you know when im done doing my thing so you can go ahead and do yours’. I will demonstrate this below by making a fetch call to a third party picture api for a random picture of a cow.
Okay so that code seems pretty straight forward right? The fetch call is promising to return us some pictures of cows and the .then functions are also returning promises that will only get executed when the one before of it returns and assuming the fetch call returned an error that's what the .catch block is for. There are a few downsides to this one is that each .then is a new function which could start to take up more space in memory also since code is always changing when you'd want to make changes you would have to update a lot more lines of code also another thing I don't like is that in each .then block you you don't have access to all of the data only what the previous block returned. So let's see if we can make this function look a bit better and easier to read at the same time..
Inside of a function marked as ‘async’ , you are allowed to place the ‘await’ keyword in front of an expression that returns a promise. When you do the execution of the async function is paused until the promise is resolved.
^So that a mouthful.. The basic idea behind the async/await keywords is to be able to write asynchronous code that flows like synchronous code.
Now lets consider we don't just want to get a picture of a cow but instead for whatever reason we want a random picture of a cow, cat and dog. Just as context for this next code snippet i decided to use axios instead of fetch and i created an array of the different endpoints for the separate animals in the picConfig variable i just collapsed it for the sake of the photo fitting into one page. So the idea is that i'm going to map over that array and for each individual endpoint configuration I make an axios get request to the pixabay photo api and then at the end I make and array of all the finished promises.
