Question

我对如何等待异步然后在angular7中执行同步进行了很多搜索，但是到目前为止还没有运气。在我的组件中，我有两个方法loadList（）simpleMethod_1（）。

在单击事件上触发simpleMethod_1（），然后调用loadList（）

我尝试使用角度异步等待，但是没有用，或者可能是我没有以正确的方式配置它！我还尝试设置计时器，该计时器可以按我想要的方式工作（第7-10行执行），但是当互联网速度很慢时，它将失败。

loadList() {
    this.loadingGif = true;
    this.service.resetAllStoredData(); 
    // get the list data from server
    this.service.getAllList().subscribe(list => {
      this.list = list;
      // save the list so as to retrieve again
      this.service.setList(list); //sync
      this.loadingGif = false; 
    });
  }


simpleMethod_1(){

  1. const storedId = this.localStroageService.getStoredId();
  2. this.loadList();   
  3. console.log("aap loading 1", this.loadingGif)

    4. if (
      storedId !== null &&
      storedId !== undefined 
    ) {
      5. console.log("aap loading 2", this.loadingGif)

      6. if (!this.loadingGif) {
        // check before navigating
        7. const data = this.list.find(item => item.id === storedId );

         8. if (!data.complete) {
          // remember to store routing info
          // fetch user data 
         9.  this.getUserDetails();//synchronous

         10.  this.router.navigate("somepath")
        }
      }//end of loadingGif if

    }
}//end of method

（注意：我故意给出数字，以便指出我在说什么）

问题：发生的事情是，每当调用simpleMethod_1（）时，在第1行之后，甚至在loadList（）完成执行之前，都会调用异步方法loadList（）并执行第3-5行！并且由于loadingGif仍然为true，因此行号7-10永远不会执行。

我要实现的是，将触发simpleMethod_1（）， -第1行执行， -应该调用loadlist（）并等待它完成，然后从那里出来 -然后执行第3、4、5、6、7、8、9、10行...最后，它应该导航到其他页面

有人可以建议我如何实现这一目标吗？

Answer 1

这是一个解决方案

async simpleMethod1() 

{


await this.loadList()

}

async loadList() {

   var result = await this.service.getAllList();

}


async getAllList(): Promise<any>
{

    this.httpService.get().toPromise()

}

Answer 2

我使用管道和水龙头解决了问题，以防万一有人发现有帮助时发布答案。

loadList(): Observable<something[]> {
    this.lodingGif = true;

    // get the list data from server
    return this.service.getAllList().pipe(
      tap(list => {
                   // statement..
                  //statement..
          });
}

simpleMethod_1(){
      this.loadList()
      .toPromise()
      .then(list => {
  1. statement...   
  3. console.log("aap loading 1", this.loadingGif)

    4. if (
      storedId !== null &&
      storedId !== undefined 
    ) {
      5. console.log("aap loading 2", this.loadingGif)

      6. if (!this.loadingGif) {
        // check before navigating
        7. const data = this.list.find(item => item.id === storedId );

         8. if (!data.complete) {
          // fetch user data 
         9.  this.getUserDetails();//synchronous

         10.  this.router.navigate("somepath")
        }
      }//end of loadingGif if

    }
 });

}//end of method

如何等待异步方法执行然后在angular7中执行同步语句

2 个答案: