Async + Await

What is control flow?

It is the order in which statements, instructions, or functions are executed in our code. JavaScript is an asynchronous language, meaning that it reads code line by line, from top to bottom.

If there is a line that needs to fetch any information from a database, for example, it will kick off that data fetching and
continue reading the next lines immediately, instead of waiting for the fetching to be done.

JavaScript being asynchronous makes it difficult to write any code that will suddenly stop or block any application process. In the past some of the solutions for this issue were implementing callbacks, which is a function that gets passed as the last argument of another function.

This was fine until you encounter what developers call Callback Hell, which is a callback within a callback, within a callback, and so on, which makes it very difficult to read and maintain the code.

What is a promise?

A promise is the state of the result that gets return, so instead of having 10 lines of code indented with all those callbacks you can do it step by step. If something bad happens to the data, then you have an error handling, such as try catch. If you get the data successfully, then you execute a code, and like this, you write .then for each action that you want.

Async + Await is the same as promises but with a better syntax. Rather than having .then, we can put await in front of the promise and it will temporarily freeze that line of code until the promise is resolved or rejected, and then continues reading the following lines.

promises.all() are Mega promises, which are no other thing than a promise made of many promises, and it will return a promise where it will only resolve itself when all pieces of data are resolved.

Browser API's

Most new browser API's are build on native promises. Fetch is the way to get data from an API, so we can use await fetching data.

The fetch API is like a double promise, because you fetch some data from your API and then you need to convert that data (most of the time we want to convert it into JSON). Axios is also based on promises and they have some JSON defaults, so we don't need to convert the data.

JS's util package has a promisify function that converts callback-based functions to promise-based functions, so we can use our code on callback-based API's.

Since Async + Await is not built in every browser, something that we can do in order to make our code compatible with everything, is to go to Babel.com and convert the code.

Error handling

Error handling methods, such as try-catch, let you place the code that you want to execute in your program in the try part, and if anything happens, any errors can be handle in the catch part.

There is no way to abort or cancel a promise, when, for example, you have two fetch requests going at the same time. One thing that you can do is abortController(), which will cancel one or more web requests.