RxJS - interval、take制作倒计时效果

获取验证码按钮功能：

 引入所需的RxJS的方法，定义变量：

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
buttonText = '获取验证码';
isDisabled = false;  // 按钮是否灰显
seconds = 60;  // 倒计时开始时间

编写点击按钮的方法：

countDown(){
  interval(1000)
    .pipe(take(this.seconds + 1))  // 注意是+1的操作
    .subscribe({
     next: (value:number) => {
       this.isDisabled = true;
       this.buttonText = `重新获取(${this.seconds - value}s)`
   },
     error: null,
     complete: () => {
       this.buttonText = '重新获取';
       this.isDisabled = false;
   }
 });
}

HTML代码：

<button
[disabled]='isDisabled'
(click)='countDown()'
>
{{ buttonText }}
</button>

subscribe(订阅)

pipe方法用于链接可观察的运算符，而subscribe方法用于激活可观察的并监听发射的值。
subscribe完整的函数如下：
下面包含三个函数的对象被称为observer（观察者），表示的是对序列结果的处理方式。通过Observeable的subscribe函数，观察者订阅被观察者的消息。

  ①  next 表示数据正常流动，没有出现异常；
  ②  error 表示流中出错，可能是运行出错，http报错等；
  ③  complete 表示流结束，不再发射新的数据。

特点：

   ①在一个流的生命周期中，error只会触发一个，可以有多个next（表示多次发射数据），直到error 或 complete。
    ②observer.next可以认为是Promise中then的第一个参数，observer.error对应第二个参数或者Promise的catch。
    ③RxJS同样提供了catch操作符，err流入catch后，catch必须返回一个新的Observable。被catch后的错误流将不会进入observer的error函数，除非其返回新的observable出错。

ob.subscribe({
   next: data => console.log(data);
   error: err => console.log(err);
   complete: () => console.log('end of this stream')
})

import { of } from 'rxjs';

of(1).map( n => n*n).catch(err => {
  // 此处处理catch之前发生的错误
  return of(0); // 返回一个新的序列，该序列成为新的流
})

pipe方法

import { of } from 'rxjs';

const ob = of {1,2,3};
const newOb = ob.pipe (
   tap( num => console.log(num， 111)),
   map( num => 'hello:' + num)
);
newOb.sunscriibe(data => console.log(data， 333))

map方法返回一个新的函数；刚开始map和tap里的函数并未执行，知道subscribe方法调用，传入map和tap的箭头函数才开始执行。
结果：