如何使用RxJS运算符让第二个流先于第一个流执行？

原代码通过嵌套订阅实现先创建产品，再删除图片的逻辑：

this.productService.createProduct(form).subscribe((res) => {
  this.fileUploadService.remove(imageName).subscribe((res) => {
    this.closeDialog(true);
  })
})

要改成先删除图片，再创建产品的顺序，同时消除嵌套订阅，用RxJS的switchMap（或concatMap）就能轻松实现：

核心实现代码 #

this.fileUploadService.remove(imageName)
  .pipe(
    // 等图片删除请求完成后，再发起产品创建请求
    switchMap(() => this.productService.createProduct(form))
  )
  .subscribe(() => {
    // 两个请求都成功后关闭对话框
    this.closeDialog(true);
  });

补充说明 #

• switchMap会先等待上游的remove请求完成，再触发下游的createProduct请求，完美替代嵌套订阅。如果需要用到图片删除请求的返回值，直接在switchMap里接收参数即可：switchMap(removeResult => this.productService.createProduct(form))。
• 要是需要严格保证请求顺序（哪怕上游流有多个值），可以用concatMap替代switchMap，在HTTP这种单次请求的场景下，两者表现基本一致。
• 可以加上错误处理，避免某个请求失败后流程卡住：

import { catchError, throwError } from 'rxjs';

this.fileUploadService.remove(imageName)
  .pipe(
    switchMap(() => this.productService.createProduct(form)),
    catchError(error => {
      // 请求失败时的处理，比如提示用户、关闭对话框
      this.closeDialog(false);
      return throwError(() => error);
    })
  )
  .subscribe(() => {
    this.closeDialog(true);
  });

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