Angular Anguarl HttPClient-用于后续http.GETs的forEach循环？

我正在努力思考如何实现这一点。我的第一个GET返回一个对象数组，如下所示：

{
  "stuff": [
    {
      "creationTime": 1502476634000,
      "id": 1
    }
    {
      "creationTime": 1502476634001,
      "id": 2
    }
    {
      "creationTime": 1502476634002,
      "id": 3
    }
  ]
}

---

对于每个对象，我需要使用该对象id对另一个端点进行另一次GET。打第二个电话的最好方式是什么？对于每个循环，继续使用每个id调用GET并将响应推送到数组？我看了一些旧的堆栈溢出答案，他们提到了

q.all（）

，但这是不推荐的

看看这个链接。我有同样的问题，它为我解决了：

以下是一些伪代码，因为您没有提供太多信息：

return this.http.get('/api/getStuff').flatMap((stuff: any[]) => {
    if (stuff.length > 0) {
        return Observable.forkJoin(stuff.map((stuff: any) => {
            return this.http.get('/api/getAdditionalStuff' + stuff.id).map((res: any) => {
                // do what you need to do with additional stuff
                // in my case I added the additional stuff to a property of the 
                // original call
                stuff.additionalStuff = resp;
                return stuff;
            });
        }));
    }
    return Observable.of([]);
});

---

从

HttpClient

我假设您正在使用Angular4+

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getArray() {
    return this.http.get('http://myapi/getarray');
  }

  getItemPassingId(id) {
    return this.http.get(`http://myapi/getItem/${id}`);
  }
}

import { Component, OnInit } from '@angular/core';
import { first, mergeMap } from 'rxjs/operators'; // import pipeable (formerly lettable) operators
import { forkJoin } from 'rxjs/observable/forkJoin';
@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html'
})

export class MyComponent implements OnInit {
  constructor(private myService: MyService) { }

  ngOnInit() { }

  onAction() {
    this.myService.getArray() // get the array
      .pipe(
        first(),   // this would complete the observable on first value (no need to unsubscribe)
        mergeMap((array: Array<{creationTime: number, id: number}>) => {
          return forkJoin(array.map((item) => { // loop through the array and return the call based on each item's id
            return this.myService.getItemPassingId(item.id);
          }));
        })
      )
      .subscribe((results) => { // you'll get the finalized results here as an array
        console.log(results);
      });
  }
}

组件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getArray() {
    return this.http.get('http://myapi/getarray');
  }

  getItemPassingId(id) {
    return this.http.get(`http://myapi/getItem/${id}`);
  }
}

import { Component, OnInit } from '@angular/core';
import { first, mergeMap } from 'rxjs/operators'; // import pipeable (formerly lettable) operators
import { forkJoin } from 'rxjs/observable/forkJoin';
@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html'
})

export class MyComponent implements OnInit {
  constructor(private myService: MyService) { }

  ngOnInit() { }

  onAction() {
    this.myService.getArray() // get the array
      .pipe(
        first(),   // this would complete the observable on first value (no need to unsubscribe)
        mergeMap((array: Array<{creationTime: number, id: number}>) => {
          return forkJoin(array.map((item) => { // loop through the array and return the call based on each item's id
            return this.myService.getItemPassingId(item.id);
          }));
        })
      )
      .subscribe((results) => { // you'll get the finalized results here as an array
        console.log(results);
      });
  }
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/operators”导入{first，mergeMap}；//导入可管道（以前可出租）运算符
从“rxjs/observable/forkJoin”导入{forkJoin}；
@组成部分({
选择器：“我的组件”，
templateUrl:'my component.html'
})
导出类MyComponent实现OnInit{
构造函数（私有myService:myService）{}
ngOnInit（）{}
行动（）{
this.myService.getArray（）//获取数组
.烟斗(
first（），//这将完成第一个值上的可观察值（无需取消订阅）
合并映射（（数组：数组）=>{
return forkJoin（array.map（（item）=>{//在数组中循环并基于每个项的id返回调用
返回此.myService.getItemPassingId（item.id）；
}));
})
)
.subscribe（（results）=>{//您将在此处以数组形式获得最终结果
控制台日志（结果）；
});
}
}

---

希望这能有所帮助。

一个循环就可以了，为每个项目在循环中启动另一个get，然后在

中将结果推送到一个数组中（如果这是您想要做的）。如果你想要一个不太健谈的界面，并且你对服务器有源代码控制，你可以将其更改为获取一个ID数组并返回一个结果数组？在互联网上快速搜索可以找到大量关于并行请求的资料。