Angular 4中如何用Observable组合多操作并在多请求后执行函数？

兄弟，你说得太对了！嵌套订阅绝对是Observable使用里的反模式——写出来的代码层级深到像千层饼，可读性差不说，维护和错误处理都超级麻烦。针对你要“三个HTTP请求全部完成后执行回调，并用结果丰富模型”的需求，RxJS里有个完美的解决方案：forkJoin操作符，分分钟帮你摆脱回调地狱。

先唠唠为啥嵌套订阅不好 #

• 代码层级嵌套多，读起来费眼睛，后期改代码要一层一层扒，太痛苦
• 每个订阅都要单独写错误处理，很容易遗漏，导致某个请求挂了都没察觉
• 没法统一监控所有请求的完成状态，逻辑散得乱七八糟

用forkJoin重构的正确姿势 #

forkJoin的作用就是：等你传入的所有Observable都完成后，把每个Observable的最后一个结果打包成数组返回，刚好匹配你“所有请求完成后再干活”的需求。而且它会并行发起所有请求，效率比嵌套串行高多了！

重构后的代码示例 #

function loadData(callback: Function): void {
  // 把三个HTTP请求的Observable先存到数组里
  const allRequests$ = [
    this.httpRequestUno(),
    this.httpRequestDue(),
    this.httpRequestTre()
  ];

  forkJoin(allRequests$).subscribe({
    next: ([resultUno, resultDue, resultTre]) => {
      // 这里就可以用三个请求的结果给你的模型赋值了
      this.model.unoData = resultUno;
      this.model.dueData = resultDue;
      this.model.treData = resultTre;

      // 所有请求都搞定了，执行回调
      callback();
    },
    error: (err) => {
      // 统一处理所有请求的错误，不用每个订阅都写一遍
      console.error('请求出问题啦:', err);
      // 这里还能加用户提示啥的，比如弹出个错误框
    }
  });
}

额外给你补点实用场景 #

1. 如果请求有依赖怎么办？
   要是你的第二个请求得用第一个请求的结果（比如需要第一个请求返回的ID当参数），那forkJoin就不适用了，得用switchMap或者concatMap来链式调用，比如：

function loadDataWithDependency(callback: Function): void {
  this.httpRequestUno().pipe(
    switchMap(unoResult => {
      // 用第一个请求的结果发起第二个请求
      return this.httpRequestDue(unoResult.id).pipe(
        // 把第一个结果和第二个结果合并，方便后续用
        map(dueResult => ({ unoResult, dueResult }))
      );
    }),
    switchMap(({ unoResult, dueResult }) => {
      // 用前两个结果发起第三个请求
      return this.httpRequestTre(dueResult.someData).pipe(
        map(treResult => ({ unoResult, dueResult, treResult }))
      );
    })
  ).subscribe({
    next: ({ unoResult, dueResult, treResult }) => {
      // 同样给模型赋值
      this.model.uno = unoResult;
      this.model.due = dueResult;
      this.model.tre = treResult;
      callback();
    },
    error: err => console.error('请求出错:', err)
  });
}

2. 怕某个请求失败影响全局？
   如果希望单个请求失败不导致整个流程挂掉，可以给这个请求单独加catchError，比如：

const allRequests$ = [
  this.httpRequestUno().pipe(catchError(() => of(null))), // 失败就返回null，不影响其他请求
  this.httpRequestDue(),
  this.httpRequestTre()
];

最后总结一下 #

摆脱嵌套订阅的核心就是用好RxJS的组合操作符：无依赖并行请求用forkJoin，有依赖串行请求用switchMap/concatMap。这样写出来的代码既简洁又好维护，错误处理也能统一管理，比嵌套订阅舒服太多了！

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