如何通过迭代数组进行 Http 请求

Question

我被这个问题困住了。下面分享简化的伪代码：

    forkJoin({
        requestOne : this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
            .pipe(
              map((val:Response) => val.busStopList),
              map( val => val.map(q => q.stopId)),
              tap(ev => console.log('the results till now:', ev)



              // here is the line ************* [1] 
              // ["123", "234", "678" ...]

               {{  I have to make some http requests here  }}
              .
              .
              .

             ),

        requestTwo: this.http.get<Response2>('https://someapirequest.com/test/api/stop/closest?anotherone=abc')
.
.
.

在上面第 [1] 行的代码中，我在 tap 运算符中得到一个像这样的字符串数组 ["123", "234", "687"..] 完全没问题。这就是我想要的，直到那条线。但在该行之后，我必须使用该数组的项目发出连续的 http 请求。例如，在第 [1] 行之后，我必须提出这些请求：

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item1=123')

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item2=234')

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item3=687')

我尝试了很多方法，但无法找到解决方案。最后一点我已经达到了：

    .
    .
    .
    requestOne : this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
    .pipe(
      map((val:Response) => val.busStopList),
      map( val => val.map(q => q.stopId)),

      // in that point I have an **array** like this: ["123", "234", "678"]

      map(x => from(x)), //  [2]
      concatMap(arrayItem => {
      return this.http.get('https://someapirequest.com/test/api/stop/closest?item1=${arrayItem}')
      })  //  [3]
    .
    .
    .

但无法找到解决方案。我尝试在 [2] 中使用 from 将数组转换为 observable，并尝试使用 concatMap 对迭代值发出请求但失败了。有什么办法吗？

你无法想象得到一些帮助我会多么高兴。

Answer 1

我认为你必须 switchMap 到另一个 forkJoin 在你的 tap 运算符之后。所以它会像：

tap(ev => console.log('the results till now:', ev),
switchMap((ev) => forkJoin(...ev.map((id) => url+id))

Answer 2

我认为你应该做的是以下几点

forkJoin([  // note that I am using an array as input to forkJoin
  this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
  .pipe(
     map((val:Response) => val.busStopList),
     map( val => val.map(q => q.stopId)),
     // create an array of Observables
     map((array, i) => {
       // the following map is the array method and not the rxjs map opeator
       return array.map(v => his.http.get(`https://someapirequest.com/test/api/stop/closest?item${i}={v}`);
     }),
     // use concatMap to make sure the next Observable is "executed" when the previous one completes
     concatMap(arrayOfObs => forkJoin(arrayOfObs)),
  ),
  .
  .
])

Answer 3

https://rxjs-dev.firebaseapp.com/api/index/function/forkJoin
forkJoin([a, b]) 接受数组，而不是对象 (forkJoin({ a: this.http.get('') }))。所以，应该是

forkJoin([this.http.get(''), this.http.get('')]);

所以这都是关于 switchMap 到另一个可观察的，参见

如何通过迭代数组进行 Http 请求

How to make Http Request over iterating array

observable

rxjs

typescript

angular