Updated: May 29, 2020
While this isn’t asynchronous itself, it is the fundamental concept that would make it possible to do so. A general use case would look something more like this:
Note that in this example, the delay would be seemingly unnoticeable granted there were no network requests or heavy computations being carried out. Making network requests would be done in relatively the same way. It will typically look something like this:
Here, we are making a network call using jQuery and passing an anonymous function as the second parameter to run when it is complete. This makes it possible to grab information from another resource before using its value in your application. While this pattern is quick to grasp and implement, heavy use of callbacks being used in this fashion can get out of hand as a project grows. The flow of the application can become harder to follow as well as a nightmare when you begin nesting callbacks under each other in a chain of requests (often referred to as Callback Hell). Something needed to be done.
Enter the Promise API.
Promises Promises were introduced in ES6/ES2015. They represent one thing: the eventual result of an asynchronous operation. An example being:
You’ll notice that promises still take advantage of callbacks. The .then() and .catch() methods can be thought of as lifecycle hooks for the promise. When the promise is fulfilled, the callback passed to the .then() method is called. If the promise gets rejected, the same happens for the callback passed to the .catch() method. Some distinctive advantages of Promises:
They can be chained together, using the return value from one request in the next .then() call
They provide a more consistent way to handle errors
Can be wrapped around methods of other libraries that implement the callback interface to provide the Promise API
Using the async keyword before defining a function, the await keyword is “exposed” inside it’s code block. Using the await keyword will “pause” execution of the following lines of code until the awaited promise completes (It does not actually pause execution though, as it only wires up the code as referenced callbacks under the hood). This can further progress the readability of our code with no sacrifice to performance.
Elegant Software Solutions