来自 Angular 中嵌套 http 请求的嵌套 Observable

Question

这是我打算做的。

请求https://reqres.in/api/users/2

发送响应如下。

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar":
      "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  }
}

现在，我想抓取头像 url 并发出另一个请求，这会给我二进制图像。

最后，我想要的输出是一个给我这些数据的 Observable。

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar":
      "BINARY_GIBBERISH HERE"
  }
}

这是我接近但无法完成的方式。

this.http
  .get('https://reqres.in/api/users/2')
  .switchMap(a => {
    const image$ = this.http.get(a.json().data.avatar);
    const data = Observable.of(a.json().data);
    // Do something here to combine.
  })
  .subscribe(a => {
    // get data here.
  });
}

基本上，有什么办法可以拥有这样的结构，

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar": [Observable from this.http.get]
  }
}

然后解析为我的最终数据？

Answer 1

您不需要为此使用 switchMap，而是使用 concatMap 或 mergeMap：

this.http
  .get('https://reqres.in/api/users/2')
  .concatMap(a => {
    const data = a.json().data;
    const image$ = this.http.get(data.avatar);

    return image$.map(imageData => {
      data.avatar = imageData;
      return data;
    });
  })
  .subscribe(a => {
    // get data here.
  });
}

来自 Angular 中嵌套 http 请求的嵌套 Observable

Nested Observables from nested http requests in Angular

ajax

rxjs

angular2-observables

angular

这是我接近但无法完成的方式。