如何在迭代数组上进行 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]行的代码中，我在点击运算符中得到了一个像这样的字符串数组 ["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

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

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 到另一个 observable 的全部内容，请参阅 the first one