Angular combineLatest 操作符学习——保证在某些数据不为空的前提下进行下一步

??概念：

??combineLatest?运算符是 RxJS 中的一个组合类运算符，它用于将多个 Observable 的最新值进行合并，并生成一个新的 Observable。当任何一个源 Observable 发出新值时，combineLatest?将获取所有源 Observable 的最新值，并使用这些值作为参数调用一个投影函数，然后发出投影函数的结果。

使用场景：

1. 当你需要根据多个 Observable 的最新值来执行一些操作时，可以使用?combineLatest?运算符。
2. 当你需要在多个 Observable 中的任何一个发出新值时执行一些操作时，也可以使用?combineLatest?运算符。

示例：?

import { combineLatest } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, switchMap } from 'rxjs/operators';

@Component({
  // ...
})
export class YourComponent implements OnInit {
  input1Value: string;
  input2Value: string;

  ngOnInit() {
    // 监听输入框的值变化
    const input1$ = this.input1.valueChanges.pipe(
      debounceTime(300), // 延迟300ms
      distinctUntilChanged(), // 仅在值变化时触发
      filter(value => !!value) // 过滤空值
    );
    const input2$ = this.input2.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      filter(value => !!value)
    );

    // 当两个输入框都有值时触发API调用
    combineLatest([input1$, input2$]).subscribe(([input1Value, input2Value]) => {
      // 在任一输入框的值发生变化时执行一些操作
      if(input1Value && input2Value) {
        this.runApi();
      }
    });
  }

  runApi() {
    //处理事务逻辑
  }
}

如果需要监听的值是从API里面来的，可以将上面代码改成：

????????在 ngOnInit 生命周期钩子函数中，我们分别从两个 API 中获取到 value1$ 和 value2$ 两个 Observable 对象，分别表示两个输入框中的值。然后，我们使用 RxJS 中的 combineLatest 操作符将这两个 Observable 对象合并成为一个新的 Observable 对象，它会发出一个数组，数组中包含了 value1 和 value2 两个输入框的最新值。当其中任一 Observable 对象发出新值时，combineLatest 操作符会将最新值数组发出给订阅者。

????????我们使用 subscribe 方法订阅上述合并后的 Observable 对象，当订阅到最新值数组时，我们判断其中的两个值是否都存在，如果存在，则在 runApiWithValues 方法中调用需要执行的 API。这样，在两个输入框都有值时才会执行调用 API 的代码，否则订阅者不会接收到最新值数组，也不会调用 API。需要注意的是，combineLatest 操作符只会在两个或两个以上的 Observable 对象都至少发出了一个值之后才会发出新值数组，因此确保了两个输入框的值都有值才会执行后续代码。

import { Component } from '@angular/core';
import { combineLatest, Observable } from 'rxjs';

import { ApiService1 } from './api.service1';
import { ApiService2 } from './api.service2';

@Component({
  selector: 'app-root',
  template: '...',
})
export class AppComponent {
  value1$: Observable<number>;
  value2$: Observable<number>;

  constructor(private api1: ApiService1, private api2: ApiService2) {}

  ngOnInit() {
    this.value1$ = this.api1.getValue1();
    this.value2$ = this.api2.getValue2();

    combineLatest([this.value1$, this.value2$])
      .subscribe(([value1, value2]) => {
        // 只有在两个输入框都有值时，才会执行下面的代码
        this.runApiWithValues(value1, value2);
      });
  }

  runApiWithValues(value1: number, value2: number) {
    // 在这里编写调用 API 的代码，使用 value1 和 value2 两个参数
  }
}