如何使用RxJS链式Observables顺序调用两个GET接口

要实现先调用第一个接口拿目标URL、再调用第二个接口的需求，直接使用RxJS的switchMap高阶操作符即可完成链式传递，它可以将前一个Observable的输出作为后一个Observable的输入，自动完成订阅传递。

基础实现（原生RxJS） #

import { ajax } from 'rxjs/ajax';
import { switchMap } from 'rxjs/operators';

// 构造链式可观察对象
const request$ = ajax.get('http://example.com/get-endpoint').pipe(
  // 第一个接口请求成功后，拿到返回的URL发起第二个请求
  switchMap(firstRes => {
    // 此处按第一个接口的实际返回结构取第二个接口的URL，示例假设接口直接返回URL字符串
    const secondApiUrl = firstRes.response;
    return ajax.get(secondApiUrl);
  })
);

// 订阅后触发请求，直接拿到第二个接口的返回结果
request$.subscribe({
  next: secondRes => {
    console.log('第二个接口返回数据：', secondRes.response);
  },
  error: err => {
    console.error('请求过程出错：', err);
  }
});

Angular 场景实现（基于HttpClient） #

如果是在Angular框架中使用，代码逻辑一致，只需将ajax替换为HttpClient即可：

import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

@Injectable({providedIn: 'root'})
export class ApiService {
  constructor(private http: HttpClient) {}

  getSecondApiData() {
    return this.http.get<string>('http://example.com/get-endpoint').pipe(
      switchMap(secondUrl => this.http.get(secondUrl))
    );
  }
}

// 组件中调用
@Component({/* 组件配置 */})
export class DemoComponent {
  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getSecondApiData().subscribe(res => {
      // 处理第二个接口的返回结果
      console.log(res);
    })
  }
}

常用扩展场景 #

• 若需要同时拿到第一个接口和第二个接口的返回结果，可以在switchMap内部再用map组装返回值：

  switchMap(firstRes => {
    const secondUrl = firstRes.response;
    return ajax.get(secondUrl).pipe(
      map(secondRes => ({ firstData: firstRes.response, secondData: secondRes.response }))
    )
  })
  

• 操作符可按需替换：如果需要按请求顺序返回所有结果换用concatMap，需要并行处理请求换用mergeMap，不需要取消前次未完成请求换用exhaustMap。

内容的提问来源于stack exchange，提问作者Ellbar