如何在2个observable均返回结果后执行代码并取值，避免重复请求

你遇到的重复请求本质是因为RxJS的冷Observable（Angular HttpClient返回的请求流就是冷Observable）的特性：每次被订阅都会重新执行生产逻辑，你原来的写法对obs1$、obs2$各订阅了2次（单独订阅1次，forkJoin里又订阅1次），自然会触发两次请求。

只需要通过forkJoin一次订阅就能覆盖所有需求，具体实现分为两种场景：

场景1：不需要单独处理单个请求的返回结果，等两个请求都完成后再统一赋值+校验 #

直接在forkJoin的回调里处理所有逻辑即可，代码最简洁：

import { forkJoin, of } from 'rxjs';

// 实际场景替换为你的真实http请求流
const obs1$ = of(1); 
const obs2$ = of(2);

// 仅需一次订阅
forkJoin([obs1$, obs2$]).subscribe(([value1, value2]) => {
  // 分别赋值
  this.first = value1;
  this.second = value2;
  // 统一校验
  if (this.first === 0 || this.second === 0) {
    console.log('empty');
  }
});

场景2：需要拿到单个请求的返回结果就立刻执行逻辑（不需要等另一个请求返回） #

可以搭配tap操作符提前处理单个请求的逻辑，依然不会触发重复请求：

import { forkJoin, of, tap } from 'rxjs';

const obs1$ = of(1).pipe(
  tap(value1 => {
    // 拿到obs1返回值立刻执行的逻辑写在这里
    this.first = value1;
    console.log('obs1请求完成，单独逻辑执行完毕')
  })
);
const obs2$ = of(2).pipe(
  tap(value2 => {
    // 拿到obs2返回值立刻执行的逻辑写在这里
    this.second = value2;
    console.log('obs2请求完成，单独逻辑执行完毕')
  })
);

// 等两个请求都完成后执行校验逻辑
forkJoin([obs1$, obs2$]).subscribe(() => {
  if (this.first === 0 || this.second === 0) {
    console.log('empty');
  }
});

两种写法都保证每个Observable仅被订阅一次，不会触发重复Http请求。

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