如何在多个异步请求中使用js async / await

Question

我正在使用Angular 7，现在有一个方法（Angular Guard CanActivate）包含一些嵌套的http调用方法，所有嵌套的http调用完成后，我需要返回数据。

如下代码所示，仅在getCurrentUser()完成后，才在canActivate()中返回结果，而现在，由于getCurrentUser()尚未完成，它始终返回false。

export class AuthGuard implements  CanActivate{


  constructor(private commonService: CommonService) {
  }

  async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('======');
    await this.getCurrentUser();
    return this.hasAccess;
  }

  hasAccess: boolean = false;

  async getCurrentUser(){
    await this.commonService.getToken().subscribe(token => {
      this.commonService.getCurrentUser(param, token).subscribe(o => {
        if(o.success){

          this.hasAccess = true;

        }else {
            window.location.href = '/forbidden.html';
          }
      }, error => {
        console.log(error);
      });
    });
    console.log("async");
  }
}

[您可以看到有两个异步方法A，B应该等待，而A，B不是并行的，我检查了有关Promise和async / await的文档，没有找到解决方案。

由于等待应该始终跟随异步，所有异步http调用完成后，我该怎么做才能让canActivate()返回结果？

Answer 1

您正在寻找Promise.all（）方法。

Answer 2

您可以使用async await和Promise.all的组合。这样，您可以等待所有异步网络请求，并在所有请求完成后执行一些操作。

Promise.all()接受一个诺言数组并将其包装为一个诺言。而且我们已经知道一些处理单个诺言的不错的语法。我们可以等待。

为了您的理解，请看下面的代码示例：

let films = await Promise.all(
  characterResponseJson.films.map(async filmUrl => {
    let filmResponse = await fetch(filmUrl)
    return filmResponse.json()
  })
)
console.log(films)

我从本文引用了这个示例，它可以帮助您找出解决方案

How to use async/await with map and Promise.all