Question

我有这种方法：

 zip(
  this.$one.getOne(id)
     .pipe(switchMap(oneResult => {
        return this.$two.getTwo(oneResult.id)
      }))
     .pipe(switchMap(twoResult => {
        // Here I Would like to use the **oneResult** as argument to the $three observable too.
        return this.$three.getThree(oneResult.id)
     })),
   this.$four.getFour()
 ).subscribe(zipResult => {
     [getTwoResult, getThreeResult]
 }

如何将$one可观察结果传递给$two可观察和$hree可观察？我可以在第一个switchMap上获取它。

Answer 1

您在map上使用switchMap创建了一个“ resultSelector”。 switchMap具有一个resultSelector函数，该函数可用于创建相同的效果，但是在以后的RxJS版本中可能会弃用此函数，而不是使用map，如以下答案所示。您将有效地将oneResult和twoResult包装到一个对象或数组中，以便在第二个switchMap中使用。您可以根据需要继续进行下去。看起来像这样（我增加了延迟以模拟API调用）：

import { Component } from '@angular/core';
import { Observable, of, zip } from 'rxjs';
import { map, switchMap, delay } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  getOne(id: string): Observable<string> {
    return of('foo').pipe(delay(1000));
  }

  getTwo(id: string): Observable<string> {
    return of('bar').pipe(delay(1000));
  }

  getThree(id: string): Observable<string> {
    return of('baz').pipe(delay(1000));
  }

  getFour(id: string): Observable<string> {
    return of('foobar').pipe(delay(1000));
  }


  ngOnInit(): void {
    zip(
      this.getOne('foo').pipe(
        switchMap(oneResult =>
          this.getTwo(oneResult).pipe(
            map(twoResult => ({ oneResult, twoResult }))
          )
        ),
        switchMap(oneTwoResult => {
          console.log(oneTwoResult);
          return this.getThree(oneTwoResult.oneResult);
        })
      ),
      this.getFour('foobar')
    )
    .subscribe(result => console.log(result));
  }
}

使用resultSelector的{{1}}功能：

switchMap

这是StackBlitz，显示了此功能的实际作用。

希望有帮助！

如何将第一个可观察的结果转化为下一个可观察的结果？

1 个答案: