了解等待角度答案

【问题标题】：understand await in angular了解等待角度
【发布时间】：2021-11-18 23:54:25
【问题描述】：

我想了解如何在我的情况下使用 await。

我有这个代码：

      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();
        }
    
      }

我在代码中输入了所有需要的信息。

上述情况如何使用await？

在我为每个步骤使用 setTimeout 之前大约有时间，但不能完美地工作，因为编译器可能会在完成第一步之前转到另一个步骤。

【问题讨论】：

这段代码的哪些部分是异步的？目前还不清楚您要等待什么。
简而言之，除非您需要，否则您不应该这样做，因为第三方库使用了 Promise。异步操作应该可以通过 angular imo 中的 observables 和替换来解决
@Bergi 正如我们在代码中看到的那样，我在注释（//）之间有 4 个第 4 部分作业，每个部分都应该在执行第二部分之前完成。
@Kayo 当然，但如果所有功能都同步，它们确实按顺序完成。哪些函数调用是异步的？
我需要知道的，它需要是异步方法吗？了解我到底想要什么：在 shell 脚本中的每一行中，当行完成执行编译器时，编译器转到另一行，我的意思是，我想确保该方法的每个部分在执行另一部分之前完成执行，如果你看到 this.loading = false ，这部分意味着当每件事完成时停止加载器。 @Bergi

标签： javascript angular async-await

【解决方案1】：

如果 changeTime 是一个异步方法，您可以通过在它旁边应用 await 键盘并将 updateMap 方法标记为异步来等待。
假设 drawOneTrip 是一个异步函数，您可以使用 Array.prototype.map 和 Promise.all 等待它。 map 将创建一个 Promise 数组，然后使用 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;
        }
     }
   })
 );

关于 Promise.All：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

【讨论】：

还有其他步骤吗？ @兰特纳
我更新了问题。请看一下。
我如何知道是否有任何方法是异步的？应该是：异步函数（）？
你应该看看函数。 Async/await 只是 Promise 和回调的语法糖，但它有一种更简洁的方式来同步 asynchoronus 代码，因此等待 async 方法完全有意义。
"在 forEach 方法中添加 async 关键字" - no you cannot do that

【解决方案2】：

您可以在您声明为“async”的任何函数中使用“await”，并使用“await”等待任何异步函数调用完成，然后再转到下一行代码，因此这实际上取决于你们中的哪一个函数调用是异步的。

假设 drawOneTrip、marker.set 和 changeTime 实际上是异步的，那么：

    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();
        }

     }

当然，如果这些函数中的任何一个不是异步的，那么将 await 放在其调用之前是没有意义的。

【讨论】：