Get a better understanding of the RxJS Observable by implementing one that's similar from the ground up.

class SafeObserver {
constructor(destination) {
this.destination = destination;
} next(value) {
const destination = this.destination;
if (destination.next && !this.isUnsubscribed) {
destination.next && destination.next(value);
}
} error(err) {
const destination = this.destination;
if (!this.isUnsubscribed) {
if (destination.error) {
destination.error(error);
}
this.unsubscribe();
}
} complete() {
const destination = this.destination;
if (!this.isUnsubscribed) {
if (destination.complete) {
destination.complete();
}
this.unsubscribe();
}
} unsubscribe() {
this.isUnsubscribed = true;
if (this._unsubscribe) {
this._unsubscribe();
}
}
} class Observable {
constructor(_subscribe) {
this._subscribe = _subscribe;
} subscribe(observer) {
const safeObserver = new SafeObserver(observer);
safeObserver._unsubscribe = this._subscribe(safeObserver);
return () => safeObserver.unsubscribe();
}
} const myObservable = new Observable((observer) => {
let i = 0;
const id = setInterval(() => {
if (i < 10) {
observer.next(i++);
} else {
observer.complete();
}
}, 100); return () => {
console.log('unsubbed');
clearInterval(id);
};
}); const observer = {
next(value) { console.log('next -> ' + value); },
error(err) { },
complete() { console.log('complete'); }
}; const foo = myObservable.subscribe(observer); foo.unsubscribe();

[RxJS] Creating Observable From Scratch的更多相关文章

  1. Angular学习笔记—RxJS与Observable(转载)

    1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...

  2. [rxjs] Creating An Observable with RxJS

    Create an observable var Observable = Rx.Observable; var source = Observable.create(function(observe ...

  3. [RxJS] Using Observable.create for fine-grained control

    Sometimes, the helper methods that RxJS ships with such as fromEvent, fromPromise etc don't always p ...

  4. ng-packagr 打包报错 Public property X of exported class has or is using name 'Observable' from external module “/rxjs/internal/Observable” but cannot be named

    old import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable( ...

  5. Rxjs 修改Observable 里的值

    有这么一个对象c$: Observable<any> 修改里边的值: 声明一个subject subject: Subject<any>; 在ngOnInit()中进行初始化 ...

  6. [RxJS] Hot Observable, by .share()

    .share() is an alias for .publish().refCount(). So if the source is not yet completed, no matter how ...

  7. RxJS——可观察的对象(Observable)

    可观察的(Observable) 可观察集合(Observables)是多值懒推送集合.它们填补了下面表格的空白: SINGLE MULTIPLE Pull Function Iterator Pus ...

  8. rxjs 入门--环境配置

    原文: https://codingthesmartway.com/getting-started-with-rxjs-part-1-setting-up-the-development-enviro ...

  9. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

随机推荐

  1. Java基础知识强化50:运行javac 报告javac不是内部或外部命令(已解决)

    1. 问题:运行javac 报告javac不是内部或外部命令,但是运行java.java-version正常 ? 看看下面三个环境变量是否设置正确: (1)环境变量  JAVA_HOME 设置JAVA ...

  2. GCC下32位与64位机器类型变量所占字节数

    GCC下32位与64位机器类型变量所占字节数 在C语言中,编译器一般根据自身硬件针对类型变量来选择合适的字节大小,下面列举一下在GCC编译器下32位机器与64位机器各个类型变量所占字节数目: C语言 ...

  3. js框架页跳转

    1.跳出框架,在父页面. <script type="text/javascript"> window.parent.frames.location.href=&quo ...

  4. ASP.NET MVC3.0或4.0设置二级域名的方法

    之前我就想做二级域名指向同一个IP同一个程序无非是在路由匹配规则上做文章也就是对Url的重写的一种思路.我用了半天时间上网查阅了相关资料并做了Demo测试是完全 以的,在这分享给大家... 假如网站主 ...

  5. Xml读取异常--Invalid byte 1 of 1-byte UTF-8 sequence

    xml读取异常Invalid byte 1 of 1-byte UTF-8 sequence org.dom4j.DocumentException: Invalid byte 1 of 1-byte ...

  6. sql语句各种九九乘法表

    下面用while 和 if 条件写的SQL语句的四种九九乘法表 --9x9 左下角 ) BEGIN SET @S='' WHILE @J<=@I BEGIN )))))) END PRINT @ ...

  7. jQuery1.9(辅助函数)学习之—— jQuery.param( obj ); 编辑

    jQuery.param( obj );  返回一个String 描述: 创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求. jQuery.param( obj ); ...

  8. [Mugeda HTML5技术教程之9]使用元件

    元件是一个可以在舞台上实例化和再利用的预先生成的独立动画.一个元件有它自己的时间轴(层,单位等),可以独立显示的动画.元件提高了动画的重用性和灵活性,是个强大的存在.元件可用于创建复杂的动画效果. 所 ...

  9. php测试题整理(0519)

    1.B/S架构和C/S架构: B/S架构是依托于浏览器的网络系统,C/S架构是基于客户端的. B/S架构: 随着Internet和WWW的流行,以往的主机/终端和C/S都无法满足当前的全球网络开放.互 ...

  10. PHP页面中文乱码问题

    首先纯html页要用meta标签声明编码<meta http-equiv="Content-Type" content="text/html; charset=&q ...