understand await in angular

Question

i am tying to understand how to use await in my situation.

i have this code:

      updateMap() {
        this.paramsTemp = 0;
        if(this.updateMapCheck == true){
          this.loading = true;
   
        this.arrOfDisplays.forEach((display, index) => {
              if (display.removed == true) {
                if (this.locationsToSend[index + 1]) {
                  this.drawOneTrip(index, index + 1, index); // here after first one finish we go to another call, here i need await?
                  display.removed = false;
                }
              }
    
          });

     // after finish above i want to go to this.markerArr...
      
         this.markersArr.forEach((marker, index) => {
            
            marker.set("label", { text: "" + index, color: "white" });
    
          });

// here most important, if above finish i want to call this.changeTime()

// wait to finish every think above to call changeTime()

          
         this.changeTime();
         
  //  while every think finish in changeTime() i want to do last 2 line.



            this.loading = false;
            this.map.setZoom(14);
      
        }
        else{
          this.showToasterErrorUpdateMap();
        }
    
      }

all information needed i put in code.

How to use await in above situation?

before i am using setTimeout for each step with time approximately, but not work perfectly because probably compiler go to another step before finish first step.

What parts of this code are asynchronous? It's not quite clear what you want to wait for. — Bergi, Sep 26 '21 at 15:51
In short, you shouldn't unless you need to because of third party libraries using promises. Asynchronous operations should be fine through observables and substitutions in angular imo — ShamPooSham, Sep 26 '21 at 16:03
@Bergi as we see in code i have 4 part 4 job between comment ( // ), every part should finish befor execute second part. — Kayo, Sep 26 '21 at 16:15
@Kayo Sure, but they *do* finish in order if all functions are synchronous. Which function calls are asynchronous? — Bergi, Sep 26 '21 at 16:21
that what i need to know, it's need to be asynchronous method? to understand what exactly i want: in shell script linux in each line in shell when line finish execution compiler go to another line that what i mean, i want to make sure that every part of this method finish executing before execute another part, if you see this.loading = false , this part mean when every thing finish stop the loader. @Bergi — Kayo, Sep 26 '21 at 16:27
@Kayo I don't know whether they need to be asynchronous or not, since you still didn't tell me what they are supposed to do. Please [edit] your question to include the definitions of the `this.drawOneTrip`, `marker.set`, `this.changeTime`, and `map.setZoom` methods (or link the respective documentation) — Bergi, Sep 26 '21 at 16:37

Ran Turner · Accepted Answer · 2021-09-26T16:54:18.160

2

If changeTime is an async method you can await if by applying the await keyboard next to it and mark the updateMap method as async.
Assuming that the drawOneTrip is an async function you can await it using Array.prototype.map and Promise.all. map will create an array of Promises and will then be resolved using await Promise.all([])

  await Promise.all(arrOfDisplays.map(async (elem, index) => {
     if (display.removed == true) {
        if (this.locationsToSend[index + 1]) {
             await this.drawOneTrip(index, index + 1, index);
             display.removed = false;
        }
     }
   })
 );

More about map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

And about Promise.All: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

edited Sep 26 '21 at 16:54

answered Sep 26 '21 at 15:40

Ran Turner

14,906
5
47
53

and for other step? @Ran Turner – Kayo Sep 26 '21 at 15:43
I updated the question. please take a look. – Ran Turner Sep 26 '21 at 15:48
how i can know if any method is async ? shoulde be : async function( ) ? – Kayo Sep 26 '21 at 16:14
1

You should look at the function. Async/await is just syntatic sugar to promises and callbacks but it has a cleaner way of synchornizing an asynchoronus code so it obly make sense to await an async method. – Ran Turner Sep 26 '21 at 16:18
"*adding the async keyword inside the forEach method*" - [no you cannot do that](https://stackoverflow.com/q/37576685/1048572) – Bergi Sep 26 '21 at 16:35

score 0 · Answer 2 · answered Sep 26 '21 at 15:53

You can use 'await' inside any function you declared as 'async' and you use 'await' to wait for any asynchronous function call to finish before moving to the next line of code, so it really depends on which of you function calls are asynchronous.

Assuming drawOneTrip, marker.set and changeTime are in fact asynchronous then:

    async updateMap() {
        this.paramsTemp = 0;
        if(this.updateMapCheck == true){
           this.loading = true;

        this.arrOfDisplays.forEach((display, index) => {
              if (display.removed == true) {
                if (this.locationsToSend[index + 1]) {
                  await this.drawOneTrip(index, index + 1, index); // here after     first one finish we go to another call, here i need await?
                  display.removed = false;
                }
              }

          });
  
         this.markersArr.forEach((marker, index) => {
        
            await marker.set("label", { text: "" + index, color: "white" });

         });

      
         await this.changeTime();
     
         this.loading = false;
         this.map.setZoom(14);
  
        }
        else{
          this.showToasterErrorUpdateMap();
        }

     }

Of course if any of these functions are not asynchronous then putting await in front of its call makes no sense.

understand await in angular

2 Answers2