JavaScript Async & Await
What is Async and Await in JavaScript? It has to something to do with fetch and .then function, which returns promises in Asynchronous and allow other functions to run properly before the promises are returned. (or rejected, in the case there is an error). In JavaScript, functions are run synchronously, which means the file with run from up to down, left to right. What fetch function does is that it returns a promise, while letting other functions continue to run , without interruptions. A promise can take however long, but it won’t interrupt other stacks and functions that are available in the file. Once the promise is completed, it will return the results after the stack is cleared.
Remember the Fetch() .then() .then() and infinite amount of “.then”? Yeah it is not fun, here comes the introduction of Async /await function. It was first introduced in ES8 (2017) and it is simply a syntax sugar for Fetch and .then functions. It is not a new function, but simply a new way of writing asynchronous functions that returns a promise which concise the code to make sure it is easier to read and debug. Let’s see how async & await is being used.
The above snippet is one of the great usage of async & await in terms of fetch and return multiple promises. Async functions start with the keyword “async” before declaring the function name, and inside the function we can use await to fetch and return promises. We can even chain promises in a simple and efficient way where response2 won’t be returned unless json1 is resolved and returned with the result.
Let’s see an example where we need to make multiples fetches and return multiple promises, without async and await, things can get complicated pretty quickly.
As we can see, if promise1 is not returned correctly, promise2 will not proceed since it requires value1 from promise1. Things can get complicated easily when there is an error in promise1 or promise2, thus promise3 won’t return any values, and it is significantly harder to debug codes and find out where the promise went wrong in the above example.
One additional advantage of async & await is that we can use Promise.all() to consolidate all the promises and return all that is needed. Let’s see the following example:
In the above codes snippet, it ties to what we mentioned in the first example where we used Word API and GIF API to return a random word with random GIF image. If we want more than one word and return more than one GIF image, we can setup the function Promise.all() which will help us concise the codes and return all the words and GIF images once promises are done.
In conclusion, Async & Await function is one of the most revolutionary features in ES8 (2017) and it helps us realize the complicated issue with promises and gives us an intuitive solution to the problem. It makes the code more readable and efficient by all means! If you have some more time, feel free to check out the articles and videos linked below discussing further about Async & Await, Promise.all().
