In this new Async crash course, you will learn what Callbacks, Promises & Async/Await are. I will show you different examples and fetch data from a real server. Let’s start!
💻 Source code: https://github.com/lyhd/async-crash-course
Suppose you are a top class rapper and you haven’t released an album for a while and fans are asking for it day and night. So what you do is that you “promise” them that whenever it will be out, all of them would be notified. To get this done you give your fans a list. They can fill in their email addresses, so that when the album becomes available, all the subscribers instantly receive it. And even if something goes wrong, say a pandemic, so that you can’t release the album, they will still be notified.
Now everyone is happy: You, because the people don’t crowd you anymore, and fans, because they won’t miss any news on the album.
This is a real-life analogy for things we often have in programming:
Callback: A callback is a function that is passed into another function as an argument to be executed later.
Events: Events provide a dynamic interface to a WebPage and are connected to elements in the Document Object Model(DOM), for example: onclick(), onmouseover() etc.
Pending: Before the event has happened, the promise is in the pending state.
Settled: Once the event has happened it is then in the settled state.
Fulfilled: Action related to the promise has succeeded.
Rejected: Action related to the promise has failed.
Now you are thinking that its depend upon when, where you are calling function and all function call is “Call-back function”.
Here, _printWorld() _function is executed after _printHello() _complete its execution but this is not call-back function example because _printHello() _is not Asynchronous function. Suppose, _printHello() _prints after 1 Second then _printWorld() _executes first.
What if we want “Hello World” output when Asynchronous function is there. We can pass function as argument and calls it after _printHello() _complete its execution. Here below code snippet of how _function pass as argument _:
Callback function can be defined as a function passed by argument and executes when one function completes its execution.
Suppose, If you have API (Application Programming Interface) to get Students Roll numbers and select one of Roll number — getting that roll number’s data and print that data. We don’t have API to get students data so we are using _setTimeout() _Async function and getting roll number after 2s, We are also selecting one of roll number manually after 2s and print Roll number’s data after 2s. This can be done by call back function.
The program became complex and complex if we have too many things to do like Getting Students data, Selecting one of them student, get student’s roll number and get result by roll number then it become very complex. If you have any Error in this then debugging is also tedious task, this things is called “Callback Hell”, which is shape like “Pyramid Of Doom”.
Promise object has three methods: then(), catch() & finally().
If Promise is successfully executed then its data is transferred through resolve function and if it has error then passed through reject function.
We have implemented same task which is done using call back function in Promises and its easily understandable However it is complicated compare to callback function but when you use promises for sometimes then it’s easy to implement.
In _getRollNumber(), _resolve method’s data is caught by then() functions arguments and reject method’s data is caught by catch() function. Here In Promises, Every task has different promises because of that it is easy to debug and readable compare to call back function. You can see that there is no shape like “Pyramid of Doom” in Promises. This is how Callback function is replaced by Promises.
Thank you for reading!
This article was originally published on Medium.com
Quick Concepts outline:
Fetch API with Async / Await
(0:29) What is a callback function?
(1:15) What is the problem with callbacks?
(5:28) A promise may not return a value where you expect it to: You need to wait for a promise to resolve
(6:58) Using thenables with a promise
(20:15) An easy mistake to make with promises
(24:00) Creating an async function
(25:00) Applying await inside the function
(33:45) Example 1: Retrieving user data
(40:00) Example 2: Retrieving dad jokes
(47:00) Example 3: Posting data
(49:40) Example 4: Retrieving data with URL parameters
(54:55) Abstract it all into single responsibility functions
This isn’t the first attempt by Microsoft to come up with video tutorials by beginner programmers. The company also has a series of YouTube tutorials on Python for beginners.