Promises let us create asynchronous code that is a lot easier to read and understand, and a lot less repetitive to write. This is great because we can avoid nested callbacks.
A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.
They look like this...
When we create a Promise we pass in a function. This function will always accept two parameters, 'resolve' , and 'reject'.
Both of these parameters are actually functions. if the resolve() function is called our promise will be resolved. If the reject() function is called then our promise will be rejected. We then use .then() and .catch() methods to handle the data that is returned, or the error in the case that our promise is rejected.
Async/await
Async/await is a fairly newer way to deal with promises.
An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. -MDN
Async keyword
The Async keyword is a nice and easy way to work with promises.
We can use Async in front of a function expression or declaration. With the Async keyword added the function will then return a promise and in turn it becomes a asynchronous function. The promise will be resolved with the value that is returned from the function. If there is an error the promise will then be rejected.
Function declared without the Async keyword. Returns the string 'hey there'.
Now here is the same function with the async keyword included.
In this example we do not just get a string returned when we call the function, but a we actually get a promise that has been resolved with the value 'hey there'.
So the async keyword creates a promise that resolves with whatever value is being returned by the function.
Await keyword
Thats not all though. There is also another keyword involved to complete the package. The Await keyword will pause the execution of a function while it waits for the promise to be resolved. This means that we can run code after an asynchronous operation without having to nest things with callbacks. So let's say we have an axios call to an api that holds a list of cats, and we want to log all of the cats in that list. Usually we would use .then() and console.log our result and data.
So our axios.get() will return a promise, we use the .then() method and wait until the callback is executed.
The data will then get passed to our .then() and we can use console.log(res.data) to log it to the console.
This is all good and fine, but with the Async/Await keywords this becomes even easier.
First we can we can make our function asynchronous by adding the Async keyword.
We do an axios.get() and pass int he url.
Then we use the await keyword to pause the function until the promise is resolved.
We can then take that value and save it to the variable called 'res' and the crazy thing is we will have access to that variable on the very next line.
With the await keyword in place the console.log will run only after the promise has been resolved. So we no longer need to use a .then() to accomplish this. axios.get returns a promise, if you run it without the await keyword you will get undefined. This is because there is no data property because a promise is returned and it is not yet resolved when the console.log runs, but when we add the await keyword javaScript will not move on until that promise is resolved. Then it will take that value that the promise is resolved with and instead of storing it in a .then() the value gets stored in our 'res' variable. We can then use it on the very next line. So we are basically still using promises behind the scenes but the Async/Await keywords will hide this from us. This way the the function appears to be just a normal synchronous function. This makes things easier to write and easier to keep track of what is happening. The Await keyword is a simple way for use to tell javaScript to wait for the promise to complete before running the next line.
Rejected promises
In a Async function if we want to return a rejected promise,
we just have to create a condition, or an exception. So if we throw an error, that promise will be rejected. So what if the async operation is not resolved and something goes wrong with our request and the promise gets rejected. Right now if we run our above function and something goes wrong (maybe the url is wrong, or our internet goes down) we get an error. Something like 'Error, uncaught in promise'. This is because we don't have any code to handle the error.
So in this case we have options. We could chain a .catch() at the end of our function to catch and handle the error.
Try, catch block
In our async function we can add a try and catch block.
First we try the call to the api. That data then gets saved to the variable is then logged on the next line. Otherwise, if something goes wrong we can catch that error in the catch block, and it will run the error. So now when we call getCats first it will run the axios call and if not successful we will then have a place to catch our error.
So with .then() and .catch() it's more of a backup way to catch and handle our data. you can have multiple functions returning promises and the callback for .catch() will run for any of them if the promise is rejected. With Async/Await we are calling only one function so we can be more specific to with what we are trying to do. We are also able handle it in more detailed ways.
Top comments (0)