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

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() 被调用并且第 3-5 行在 loadList() 完成执行之前被执行！而且因为 loadGif 仍然是真的，所以第 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