Angular中如何在Observable内按指定顺序调用API？

我正在学习Angular的Observable相关知识点，尝试在Observable内调用三个API，希望它们能按编写的顺序运行。

组件代码如下：

import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-flav4',
  templateUrl: './flav4.component.html',
  styleUrls: ['./flav4.component.css']
})
export class Flav4Component implements OnInit, OnDestroy {
  orderStatus!: any;
  data!: Observable<any>;
  constructor(private httpcli: HttpClient) { }
  ngOnInit(): void {
    this.data = new Observable(observer => {
      this.httpcli.get("http://localhost:9898/api/orderStart", { headers: { "content-type": "application/json" } }).subscribe(data => {
        console.warn(data);
        this.orderStatus = data;
        observer.next(this.orderStatus);

      });
      this.httpcli.get("http://localhost:9898/api/orderWait", { headers: { "content-type": "application/json" } }).subscribe(data => {
        console.warn(data);
        this.orderStatus = data;
        observer.next(this.orderStatus);

      });
      this.httpcli.get("http://localhost:9898/api/orderComplete", { headers: { "content-type": "application/json" } }).subscribe(data => {
        console.warn(data);
        this.orderStatus = data;
        observer.next(this.orderStatus);

      });
    });
    this.data.subscribe(val => this.orderStatus = val);
  }
  ngOnDestroy(): void {
  }
}

预期控制台输出：

{"status": "orderStarted"}
{"status": "orderWaiting"}
{"status": "orderCompleted"}

实际输出：

{"status": "orderStarted"}
{"status": "orderCompleted"}
{"status": "orderWaiting"}

问题原因 #

当前写法是同时发起三个异步HTTP请求，响应顺序由服务器处理速度决定，而非代码编写顺序。手动创建Observable并嵌套subscribe属于RxJS反模式，无法保证顺序执行。

解决方案：使用RxJS操作符控制顺序 #

可以通过RxJS的concat操作符（按顺序订阅多个Observable，前一个完成后再订阅下一个），或者concatMap链式调用实现顺序执行。

方法1：使用concat操作符 #

适合无依赖的顺序请求场景：

import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable, concat, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-flav4',
  templateUrl: './flav4.component.html',
  styleUrls: ['./flav4.component.css']
})
export class Flav4Component implements OnInit, OnDestroy {
  orderStatus!: any;
  private subscription?: Subscription;

  constructor(private httpcli: HttpClient) { }

  ngOnInit(): void {
    // 定义三个API请求的Observable
    const orderStart$ = this.httpcli.get("http://localhost:9898/api/orderStart", { headers: { "content-type": "application/json" } })
      .pipe(tap(data => console.warn(data)));
    
    const orderWait$ = this.httpcli.get("http://localhost:9898/api/orderWait", { headers: { "content-type": "application/json" } })
      .pipe(tap(data => console.warn(data)));
    
    const orderComplete$ = this.httpcli.get("http://localhost:9898/api/orderComplete", { headers: { "content-type": "application/json" } })
      .pipe(tap(data => console.warn(data)));

    // 使用concat按顺序执行请求
    const sequentialRequests$ = concat(orderStart$, orderWait$, orderComplete$);
    
    // 订阅并更新状态
    this.subscription = sequentialRequests$.subscribe(val => this.orderStatus = val);
  }

  ngOnDestroy(): void {
    // 销毁订阅，避免内存泄漏
    this.subscription?.unsubscribe();
  }
}

方法2：使用concatMap链式调用 #

适合需要前一个请求结果作为后一个请求参数的场景：

import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { concatMap, tap } from 'rxjs/operators';

@Component({
  selector: 'app-flav4',
  templateUrl: './flav4.component.html',
  styleUrls: ['./flav4.component.css']
})
export class Flav4Component implements OnInit, OnDestroy {
  orderStatus!: any;
  private subscription?: Subscription;

  constructor(private httpcli: HttpClient) { }

  ngOnInit(): void {
    const sequentialRequests$ = this.httpcli.get("http://localhost:9898/api/orderStart", { headers: { "content-type": "application/json" } })
      .pipe(
        tap(data => {
          console.warn(data);
          this.orderStatus = data;
        }),
        // 第一个请求完成后执行第二个
        concatMap(() => this.httpcli.get("http://localhost:9898/api/orderWait", { headers: { "content-type": "application/json" } })),
        tap(data => {
          console.warn(data);
          this.orderStatus = data;
        }),
        // 第二个请求完成后执行第三个
        concatMap(() => this.httpcli.get("http://localhost:9898/api/orderComplete", { headers: { "content-type": "application/json" } })),
        tap(data => {
          console.warn(data);
          this.orderStatus = data;
        })
      );

    this.subscription = sequentialRequests$.subscribe();
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

关键说明 #

• concat：按顺序订阅传入的Observable，仅当前一个Observable完成时，才会订阅下一个，严格保证执行顺序。
• concatMap：将前一个Observable的结果映射为新的Observable，按顺序执行，适合有依赖关系的请求场景。
• 避免手动嵌套subscribe，这种写法会导致代码难以维护且易产生内存泄漏，应使用RxJS操作符组合异步流。
• 务必在ngOnDestroy中销毁订阅，防止内存泄漏。

内容的提问来源于stack exchange，提问作者J. Doe