Async Functions and Callback - JavaScript Tutorial

Async Functions Javascript Tutorial with examples by Ivan Cabral

Ivan Cabral
Dec 17, 2019 · 5 min read

Async functions are the most important for complex and structural applications since we can create perfect synchrony between our code and external or internal responses, these functions were added in ES2017(ECMA script 2017) allowing us to write completely asynchronous, non-blocking functions. The async function contains await operators this operator is used to wait for a promise until the promise returns a result. This operator only will use in Async block. The Await keyword makes JavaScript wait for the response value and not stop whole program execution.

Many libraries of NPM( Node Package Manager ) provide promise objects that can also be used with await pattern for our applications

I will show you how it works with examples, at the beginning is hard to learn if you have a beginner level because when you start to learn these functions you have already a medium level but don’t worry in the following examples I will explain it with easy code.

Async Functions Examples

Async functions need promises, that are used to handle asynchronous operations in JavaScript. A promise is an object that may produce a single value some time in the future that object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value, they are easy to manage when dealing with multiple asynchronous operations.

Okay let started there is a simple example of an asynchronous function with two seconds of delay with “setTimeout()” function


Example with many awaits operators

In this example, I create many awaits operators to wait for a promise until the promise returns a result, each await wait two second in total of six seconds and to show you what happens, step by step the function will be completed, the result is as we had said it is completely synchronized, this is very helpful when we need many requests and the following request needs the before values

Okay, less speech and let’s take action with the example

It’s very simple, right? but the question is why we need asynchronous functions for our code?

We need asynchronous functions in the cases when we need wait for one response but need continue the circuit of the code, for example waiting for the response of a GET or POST query and put the animation of the loading after the promise or wait for a something math function what requires time to process

Error Handling

Every code will have an error either a small or big mistake probably many of us more than once found unknown errors then we need handling these errors to helps execution to resume when interrupted. When it comes to error handling in software, either the programmer develops the necessary codes to handle error exceptions.

For handling the errors we need to use a try-catch statement, look at the following code to see how to make that, then we can make a “trow” statement to simulate an error exception

Callback Functions

A callback is pretty simple and straight forward, the callback is a function also known as a “call-after” function or higher-order is a function that is to be executed after another function as a parameter. This function is very useful for asynchronous behavior in which we want to wait for a request. I recommend callback functions for simple responses since they have a fairly quick response

Any function that is passed as an argument is called a callback function

I want to create two functions with a simple asynchronous function with a callback that has a delay for one second using “setTimeout()” and a callback function.

I will show you that in the following example code how to make these callback functions, it’s simple so let's go!

Well, so we already saw the callback function but now I show you how to handle errors with callback functions with try and catch statement it's simple only we need to add one more callback but for error to get the catch of the error exception. So we can make a “trow” statement for simulating an error and control will be passed to the first catch

Conclusion

When we use asynchronous functions we secure the correct functionality of our code, we need to use these to get more complex and clean software code and use await operators to wait for a promise until the promise returns a result without a problem and remember use try-catch statement to get the errors exceptions

What is the next step? The next step is yours, now it’s your turn to put it into practice!😅

Remember if you have any questions or inquiry tell me, I would be very glad to help you.

Thank you for seeing my post and I hope I’ve been helpful 😁

HAPPY CODING! 👏👏👏👏

JavaScript in Plain English

Learn the web's most important programming language.

Ivan Cabral

Written by

I‘m a daily coder FullStack developer with more than 10 years of experience, creator of gambling web sites, writer for JavaScript and Cryptocurrencies

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade