Как выполнить два вызова API последовательно в Guard в Angular 6?

Question

  const data = {
    authToken: `Bearer ${this.authToken}`
  }
  this.appService.getEphemeralKey(data)
    .subscribe((response) => {
      if (response) {
        console.log(response);
        this.customerId = response.associated_objects[0].id;
       // this.retrieveCard();
      } else if (response.message === 'Unauthenticated') {
        localStorage.removeItem('userInfo');
        this.router.navigate(['/']);
        this.toastrService.info('Other user login with this account');
      }
      else {
        console.log(response.message);
      }
    }, error => {
      console.log('some error occured');
    })
}

retrieveCard () {

const data = {  
    authToken: `Bearer ${this.authToken}`,
    customerId: this.customerId
}
console.log(data);
this.appService.retrieveCard(data)
    .subscribe((response) => {
        if (response) {
             console.log(response.data);

            if(response.data.sources.data.length === 0){
                console.log("no card");
                this.subscribed=false;
            this.providerService.showSubscriptionButton();
            }else{
    console.log('yes card');
    this.subscribed=true;
        }

        } else if (response.message === 'Unauthenticated') {
            localStorage.removeItem('userInfo');
            this.router.navigate(['/']);
            this.toastrService.info('Other user login with this account');
        }
        else {
    console.log(response.message);
    this.subscribed=false;
        }
    }, error => {
  console.log('some error occured');
  this.subscribed=false;
    })

}

Я хочу, чтобы эти два вызова были в моей аутентификации. Как я могу создать такой auth guard, который включает в себя два вызова API, и он вернет истину после того, как 2 API вернет истину. Как это сделать Но это не работает для двух вызовов API. Мое решение это

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const data = {
      authToken: `Bearer ${this.authToken}`,
    }
    return this.appService.getEphemeralKey(data)
      .map((res) => {
        let customerId = res.associated_objects[0].id;
        let data1 = {
          authToken: `Bearer ${this.authToken}`,
          customerId: customerId
        }
        console.log(res)
        this.appService.retrieveCard(data1)
          .subscribe((res) => {
            console.log(res);
            if (res.data.sources.data.length === 0) {
              console.log("no card");
              this.subscribed = false;
              this.providerService.showSubscriptionButton();
            } else {
              console.log('yes card');
              this.subscribed = true;

            }
          })
        if (this.subscribed) {
          return true;
        }
        return false;
      })


  }

Пожалуйста, дайте мне знать, что я здесь делаю неправильно. я не получаю данные

Answer 1

Вы должны использовать понятия Rxjs (map и flatMap) Вот официальная документация rxjs Официальные документы Rxjs

Вот кодовый шаблон, который вы должны использовать.

код контроллера

Submit() {
this.doAPICall().subscribe(res => {
 // write your logic.
})

}

сервисный код

 public doAPICall() {
    this.getEphemeralKey.map(res => {
        return res;

    }).map(res1 => {
        this.retrieveCard.flatMap(res => {
            return Observable.of({
                res1: res1,
                res2: res
            });
        })
    })
}

    public getEphemeralKey(): Observable < any > {
        let data1 = {
            authToken: `Bearer ${this.authToken}`
        }
    return this.appService.getEphemeralKey(data1);
    }

    public retrieveCard(): Observable < any > {
        let  data2 = {
            authToken: `Bearer ${this.authToken}`,
            customerId: this.customerId
        }
    return this.appService.retrieveCard(data2);
    }