Question

我有一个函数，可以进行两个http调用，第二个http的输入取决于第一个http的响应，我需要同时返回两个结果。我有以下代码会引发错误

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或任何其他机制一起返回两个嵌套的调用响应？

Answer 1

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来平整这些排放量

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

Answer 2

以下代码应该起作用：

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 3

使用异步并等待来控制多个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

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

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中发布，但足够容易，可以根据需要进行追溯。

如何将ForkJoin用于HTTP请求的顺序Angular 4

4 个答案: