Angular中嵌套http请求的嵌套Observables

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.
  });
}