如何对 http 请求序列使用 ForkJoin Angular 4

Question

我有一个调用两个 http 的函数，第二个 http 的输入取决于第一个 http 响应，我需要同时 returned 这两个结果。我有下面的代码抛出错误

SomeMethod(): Observable<any> {
    let firstResult;
    let secondResult;

    firstResult = http.get('////').map(data => {
        console.log('first response')
     secondResult = http.get('//// + {data.UserId}').map(response => {

        console.log('second response')
     })
    })

    return forkJoin([firstResult, secondResult]);
}

CallingMethod() {
    this.SomeMethod.subscribe(([firstResult, secondResult]) =>{
     /// Some logic
    })}

获取未定义的错误。期望一个可观察的、承诺的或数组。调试后知道第一个控制台输出正在打印，第二个 http 调用从未进行过，也从未看到响应。

如何使用 forkJoin 或任何其他机制return 将两个嵌套调用一起响应？

Answer 1

以下代码应该有效：

SomeMethod(): Observable < any > {
  let firstResult;
  let secondResult;

  return http.get('////').pipe(
    switchMap(res1 => http.get('//// + {res1.UserId}').pipe(
      map(res2 => [res1, res2])
    ))
  );
}

CallingMethod() {
  this.SomeMethod().subscribe(([firstResult, secondResult]) => {
    /// Some logic
  })
}

Answer 2

forkJoin 采用内联参数，而不是数组（除非这是最新版本和 Angular v4 中捆绑的 rxjs 之间的变化）

const req1 = this.http.get('https://jsonplaceholder.typicode.com/todos/1');
const req2 = this.http.get('https://jsonplaceholder.typicode.com/todos/2');

const results = forkJoin(req1, req2)

输出：

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  }
]

StackBlitz 在 v6 中，但如果需要，它很容易回溯。

Answer 3

使用 Async & await 来控制多个 http 请求。

async SomeMethod(): Promise <any> {

    let firstResult;
    let secondResult;
    firstResult = await http.get('////').toPromise();
    secondResult = await http.get('//// + {res1.UserId}').toPromise();

    return forkJoin(firstResult, secondResult);
}

 CallingMethod() {
    this.SomeMethod().then(result => {
       /// Some logic
    });
 }

Answer 4

Here is a StackBlitz 了解如何使用 concatMap 执行此操作。 concatMap 将顺序执行，而 forkJoin 将并行执行。

你需要知道的

    const requests = [
      this.http.get('https://jsonplaceholder.typicode.com/todos/1'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/2'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/3'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/4'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/5'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/6')
    ];


    from(requests).pipe(    
      concatMap((request) => request.pipe(delay(2200)))
    ).subscribe((res) => {
      this.results$.next(this.results$.getValue().concat(res))
    })

我们创建一个请求数组（可观察）。
使用 from 运算符获取数组并发出每个数组项
使用 concatMap

我在这里也添加了一个延迟来模拟缓慢加载。

如何对 http 请求序列使用 ForkJoin Angular 4

How to use ForkJoin for sequence of http requests Angular 4

angular

angular4-httpclient