美文网首页
Rxjs笔记三:Observer的简写形式以及退订Observa

Rxjs笔记三:Observer的简写形式以及退订Observa

作者: 听书先生 | 来源:发表于2022-02-21 23:27 被阅读0次
    1、Observable简写形式

    Observable对象都是一个个的对象,可以包含next、complete、以及error三个方法,用于接受Observable的三种不同事件。在创建Observable对象后,添加的事件中可以不用提供complete以及error方法。
    为了简洁性,subscribe也可以直接接受函数作为参数,第一个如果是函数类型,就会被认为是next、第二个函数参数被认为是error,第三个则是complete。

    demoObserver() {
        const theSubscribe = observer => {
            const handler = setInterval(() => {
                observer.next(Math.random()*100);
                if(Math.random()*100 > 80) {
                    clearInterval(handler);
                    observer.complete()
                }
            }, 1000);
        }
        
        const source$ = new Observable(theSubscribe);
        
        source$.subscribe(
            item => console.log(item), // next函数
            err => console.log(err),   // error函数
            () => console.log('no more data...') // complete函数
        )
    }
    

    如果不关心对异常的处理,但是关心Observable的终止事件,那依然要传递第二个参数来占位置,也就是null,表示不处理异常事件。

    source$.subscribe(
        item => console.log(item), // next函数
        null,   // error函数
        () => console.log('no more data...') // complete函数
    )
    
    2、退订Observable

    Observable和Observer之间建立的关系是通过subscribe,但是有的情况下需要切断二者之间的联系,如:Observer只需要监听一个Observable对象一分钟,一分钟之后就不再关心这个Observable这个对象的任何事件了。那么就需要“退订”了。

    const theSubscribe = observer => {
      let number = 1;
      const handler = setInerval(() => {
        observer.next(number++);
      }, 1000);
      return {
        unsubscribe: () => {
          clearInterval(handler);
        }
      }
    }
    

    theSubscribe函数有返回结果,返回结果是一个对象,其中包含一个unsubscribe字段,这个unsubscribe字段的值是另一个函数,调用了clearInterval来清除setInterval产生的效果。

    const source$ = new Observable(theSubscribe);
    
    const subscription = source$.subscribe(item => console.log(item));
    
    setTimeout(() => {
       subscription.unsubscribe();
    });
    

    在输出了1、2、3之后,unsubcribe函数被调用,作为Observer不再接受到被推送的数据,但是作为Observale的source$就再也不会产生新的数据了,输出结束,这是一个完整的“订阅”和“退订”过程。
    虽然unsubcribe函数调用之后,作为Observer不再接受到被推送的数据,但是作为Observable的source$并没有终结,因为始终没有调用complete,只不过它再也不会调用next函数了。

    RxJS中很重要的一点:Observable产生的事件,只有Observer通过subscribe订阅之后才会收到,在unsubscribe之后就不会再收到。

    相关文章

      网友评论

          本文标题:Rxjs笔记三:Observer的简写形式以及退订Observa

          本文链接:https://www.haomeiwen.com/subject/swsilrtx.html