Skip to main content

AWAIT EACH IN JAVASCRIPT

Asynchronous javascript is not everyone’s cup of tea and add to that the complexity of using asynchronous code inside loops and things might start getting out of hand. So, in this article we’ll look at a very useful npm package called await each for javascript.
If you don’t know, it is not possible in Javascript to use asynchronous code with any loop that works on callbacks. For example, javascript promises will work perfectly fine with for and while loops but will not work as expected when it comes to forEach and map etc.

The forEach loop

forEach in javascript
If you’ve been living under a rock and for some reason do not know what the forEach loop does, it iterates over an array and takes each element as an argument for a callback and executes a callback for each value in the array!
In the above picture you can see how the names of the students are being displayed.

Problem with async forEach

wrong use of forEach in javascript
Look at the code above and it’s output. You surely did not want this output from this piece of code, did you? So, why does this happen ? This happens because in a forEach loop the iteration does not wait for the await statement to be executed before going into the next iteration. The code inside each iteration waits for the await but not for going into the next iteration. That is why we get the output that we get.

Using await-each

await each in javascript
Well, first of all to be able to use await-each you need to install the await-each npm package and require it in your file. Once you do that you can use awaitEach in the way shown in the code above to get your desired output.
What awaitEach does is wait for any await statement inside the callback and only then iterates to the next iteration. This is helpful in many situations where parallel execution of promises in Promise.all is not the correct solution.
I hope you understood when and where can await-each be used and how it can be helpful to you. If you have any other doubts on how promises are inside loops in Javascript you can take a look at this article -> 

Comments

Post a Comment

Popular posts from this blog

How to use Ngx-Charts in Angular ?

Charts helps us to visualize large amount of data in an easy to understand and interactive way. This helps businesses to grow more by taking important decisions from the data. For example, e-commerce can have charts or reports for product sales, with various categories like product type, year, etc. In angular, we have various charting libraries to create charts.  Ngx-charts  is one of them. Check out the list of  best angular chart libraries .  In this article, we will see data visualization with ngx-charts and how to use ngx-charts in angular application ? We will see, How to install ngx-charts in angular ? Create a vertical bar chart Create a pie chart, advanced pie chart and pie chart grid Introduction ngx-charts  is an open-source and declarative charting framework for angular2+. It is maintained by  Swimlane . It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functio...
Post a Comment
Read more

Understand Angular’s forRoot and forChild

  forRoot   /   forChild   is a pattern for singleton services that most of us know from routing. Routing is actually the main use case for it and as it is not commonly used outside of it, I wouldn’t be surprised if most Angular developers haven’t given it a second thought. However, as the official Angular documentation puts it: “Understanding how  forRoot()  works to make sure a service is a singleton will inform your development at a deeper level.” So let’s go. Providers & Injectors Angular comes with a dependency injection (DI) mechanism. When a component depends on a service, you don’t manually create an instance of the service. You  inject  the service and the dependency injection system takes care of providing an instance. import { Component, OnInit } from '@angular/core'; import { TestService } from 'src/app/services/test.service'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.compon...
Post a Comment
Read more

How to solve Puppeteer TimeoutError: Navigation timeout of 30000 ms exceeded

During the automation of multiple tasks on my job and personal projects, i decided to move on  Puppeteer  instead of the old school PhantomJS. One of the most usual problems with pages that contain a lot of content, because of the ads, images etc. is the load time, an exception is thrown (specifically the TimeoutError) after a page takes more than 30000ms (30 seconds) to load totally. To solve this problem, you will have 2 options, either to increase this timeout in the configuration or remove it at all. Personally, i prefer to remove the limit as i know that the pages that i work with will end up loading someday. In this article, i'll explain you briefly 2 ways to bypass this limitation. A. Globally on the tab The option that i prefer, as i browse multiple pages in the same tab, is to remove the timeout limit on the tab that i use to browse. For example, to remove the limit you should add: await page . setDefaultNavigationTimeout ( 0 ) ;  COPY SNIPPET The setDefaultNav...
Post a Comment
Read more