Question

我有一个正在运行的功能。调用此函数时，它将在组件中设置一个值。（user.userImage）

getLoggedInUserPhoto() {
this.adalService.acquireToken('https://graph.microsoft.com')
  .subscribe(token => {
    let header = new HttpHeaders().set('Authorization', 'Bearer ' + token).set('Content-Type', 'image/jpeg');
    this.imageService.getImage('https://graph.microsoft.com/v1.0/me/photo/$value', header)
      .subscribe(blob => {
        this.imageService.getImageUrlFromBlob(blob)
          .then(res => {
            this.user.userImage = res;
          })
      })
  });
}

我正在尝试对新函数执行相同的操作，除了我希望函数返回值而不是在组件中设置值。我到处搜索，很可能是我使用了错误的搜索词。但是，这是我要达到的目标的通行证

getPhoto(email: string): string {
return this.adalService.acquireToken('https://graph.microsoft.com')
  .subscribe(token => {
    let header = new HttpHeaders().set('Authorization', 'Bearer ' + token).set('Content-Type', 'image/jpeg');
    this.imageService.getImage('https://graph.microsoft.com/v1.0/users/'+email+'/photo/$value', header)
      .subscribe(blob => {
        this.imageService.getImageUrlFromBlob(blob)
          .then(res => {
            return res;
          })
      })
  });
}

Answer 1

我建议您使用switchMap，因为switchMap运算符将在触发第二个请求之前等待第一个请求的响应到达。

return this.http.get('https://graph.microsoft.com')
  .switchMap(res1 => {
    // use res1 to further control param of the second call
    this.http.get(''https://graph.microsoft.com/v1.0/users/'+email+'/photo/$value', header')
  })
  .subscribe(res2 => {
    //do stuff with the second response
  })

Answer 2

您应该在管道中使用合并映射。然后，您可以做您想做的事情。使用合并映射时，它会等待一个订阅完成，然后您可以在下一个操作中使用它的响应。

return this.adalService.acquireToken('https://graph.microsoft.com').
 pipe(
     mergeMap(res => {
         this.http.get(''https://graph.microsoft.com/v1.0/users/'+email+'/photo/$value', header')
     })
 ).subscribe(res => {
  //this "res" give you the second request respond
 })

从函数中的多个可观察调用返回值

2 个答案: