understand await in angular-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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.