[RxJS] Creating Observable From Scratch
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的更多相关文章
- Angular学习笔记—RxJS与Observable(转载)
1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...
- [rxjs] Creating An Observable with RxJS
Create an observable var Observable = Rx.Observable; var source = Observable.create(function(observe ...
- [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 ...
- 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( ...
- Rxjs 修改Observable 里的值
有这么一个对象c$: Observable<any> 修改里边的值: 声明一个subject subject: Subject<any>; 在ngOnInit()中进行初始化 ...
- [RxJS] Hot Observable, by .share()
.share() is an alias for .publish().refCount(). So if the source is not yet completed, no matter how ...
- RxJS——可观察的对象(Observable)
可观察的(Observable) 可观察集合(Observables)是多值懒推送集合.它们填补了下面表格的空白: SINGLE MULTIPLE Pull Function Iterator Pus ...
- rxjs 入门--环境配置
原文: https://codingthesmartway.com/getting-started-with-rxjs-part-1-setting-up-the-development-enviro ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
随机推荐
- linux系统自动执行任务(转)
开机启动 开机启动应该是我们很经常的需求了,我们常需要在开机时就自动执行某些命令来开启服务,进程等,有了它我们不必再在每次开机时输入同一堆命令. chkconfig命令 使用chkconfig命令可以 ...
- Windows server 2008系统下FTP服务器的安装
一.在 Windows 服务器上安装 FTP 服务 1. 在"开始"菜单上,单击"管理工具",然后单击"服务器管理器". 2. 在" ...
- DataGrid( 数据表格) 组件[7]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- css单位rem---移动端至宝
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大 家一定会想起em单位em(font ...
- 使用VS Code开发AngularJS 2 第一个应用程序
使用VS Code开发AngularJS 2 第一个应用程序 目录 运行环境 创建项目 安装依赖包 创建TypeScript应用程序 配置应用程序 运行应用程序 运行环境 运行环境: Windows ...
- javascript 操作 css Rule
//add addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets ...
- Codeforces Round #279 (Div. 2)f
树形最大上升子序列 这里面的上生子序列logn的地方能当模板使 good #include<iostream> #include<string.h> #include< ...
- MongoDB自学笔记2---1.2 初识MongoDB
1.2.1MongoDB简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之 ...
- WinForm(C#)自定义控件之——RoundButton(圆形按钮)
最近需要做一个圆形的按钮,去CodeProject找了一下,发现有现成的可用,但不能完全满足我的需求.因此自己试着利用WinForm中的自定义组件功能,制作一个圆形按钮.圆形按钮小制作即将开始之前,先 ...
- 理解jquery的.on()方法
jquery在的.on()方法用来给元素绑定事件处理函数的,我经常用在两个地方: 给未来的元素绑定事件:我总是这样用:$(document).on('click','#div1',function() ...