Javascript Waits

Michael Zippo 04.11.2021

👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!

Introduced in ES6, Promises allows you to easily write asynchronous code without having to deal with multiple callback functions. With promises, there is no need to worry about multi-level callbacks that are both hard to write and maintain.

There is another feature in JavaScript that makes it even easier to write asynchronous code using Promises: asynchronous functions / attend. These - these allow you to write code that performs synchronous looks but made asynchronous routines.

In this guide, we are going to discuss what the asynchronous / wait function is and how you can use it in your code. Let’s start

Promises: A Refresher

Before we start talking about asynchronous / wait functions, we need to recap promises. A promise represents an asynchronous operation. Indicates the code that an operation will be performed, and if the operation is successful, a value will be returned. Otherwise, an error will be returned to the rest of the program.

A Promise represents a value that is not known at the time the promise was created. A promise is just that: a promise that future values ‚Äã‚Äãwill be returned to your code. Since the promise is an object, it must be in all caps.

Consider this scenario. You need to retrieve a resource from an API. It will take a second or two to process your request. Instead of having the user waiting for the request to be processed, you can move your code to a Promise so that the rest of your program can continue to function.

This means that you can continue rendering part of your website UI while extracting data. As soon as a value is returned, Promise will send to your main program.

Here is an example of a promise:.

Our code feedback: your cookies have been sent! When we execute the sendCookies.then () method, our promise is released. Our program waits 1000 milliseconds, then returns the value "Your cookies have been sent!" " Our main program

How to use Async and Wait

In a function and async / wait, a code execution wait statement blocks within its asynchronous function until ’to which a promise is returned. which is why developers often claim that asynchronous / asynchronous wait functions but watch asynchronous tasks perform.

Consider the following example:.

Our code feedback: your cookies have been sent! Our sendCookies () function takes 1000 milliseconds to return the value "Your cookies have been sent". In this case, we’ve declared an asynchronous function so that our code is waiting for a promise to be resolved or rejected.

The "async" function The keyword tells our code that we want to perform an asynchronous operation in our function. The "expectation" word - key indicates our code wait for sendCookies () promise to return before continuing to execute our program.

Asynchronous functions always return a promise.

Using Async and With Multiple Pass Wait

The asynchronous / wait functions are most often used when there are multiple promises that you need to work with. This is sometimes called chaining promises. Indeed, your code will wait for a promise to return to each step before moving on to the next one:

Our code returns:

Each step takes 1000 full milliseconds !. Our sendCookies () function is not executed until the promise of return from our ProcessOrder () function.

Asynchronous Expressions

There are three ways you can use an asynchronous / wait function.

The first is the approach we showed in our last examples: by declaring functions. In our examples, we declared functions that return a promise, so we used the "async" and "expectation" words - key to perform these functions

You can also declare an asynchronous function using direction functions:

This code returns: Your cookies have been sent! this is the same as our first example, but instead of declaring a main () function we used an arrow function

Similarly you can use the expression syntax of the function:.

This return code: Your cookies have been sent As you can see, the output is again l or itself. The only difference is how we declared our function.

In fact, this syntax is very similar to our last example. We just use the word - key "function ()" in place of using a boom function.

There is no better way to declare an asynchronous / wait function. It all depends on the program you are writing and the syntax you prefer. While it can be argued that directing functions are the most concise method, other ways of declaring an asynchronous / wait function might be better in other cases.

Processing web requests using Async / Wait

One of the most common uses of the async / is await function to process web requests with a promise- based API , Fetch As (). You can read more about how to use fetch () in our JavaScript beginner’s guide to search

When we run our retrieveComments () function, we use the" wait " word - key function to wait" execution of our fetch () statement. This means that the rest of our schedule does not continue until our web request has been processed. Indeed, the function returns a promise.

When a promise is returned by the fetch () function fetch (), we convert the value it returned to JSON. We then identify the object to fetch a list of names of all comments and print it to the console

How to handle an error

Oh, like I wish the errors didn’t occur in the code. But they do, and there developers we have to plan something. Asynchronous function, error handling is performed using a synchronous try ... catch. Consider this code:.

In our example, we used a .catch () if one returned. In this case, we use require ("Error") to tell our code that an error has occurred.

If this statement is executed, our .catch () declaration kicks in and the error is printed.

Our code returns: NetworkError when trying to retrieve the resource. In this example, we used a try / catch statement to check if our wait method returned a promise of success. Again , our API is invalid causing our program to reject our promise. When this happens, the "catch" is executed in our try / catch block, which logs our error to the console.

Conclusion

The asynchronous / wait functions help to write asynchronous operations in the code. When an asynchronous function is declared, you can use the "waiting" word - key to await the outcome of operations. The wait keyword must be used with a function that returns a promise.

You are now ready to use asynchronous JavaScript functions / Wait like an expert!