JavaScript中的observables 操作符创建实例

目录
  • 一、创建实例
    • 1.​​create​​
    • 2.​​empty​​
    • 3.​​from​​
    • 4.​​of​​
    • 5.​​fromEvent​​
    • 6.​​fromPromise​​
    • 7.​​interval​​
    • 8.​​timer​​

操作符是 observables 背后的马力,为复杂的异步任务提供了一种优雅的声明式解决方案。

本篇就带领大家 “粗略” 过一下 observable 创建实例的重点 API 都有哪些?以及用代码片段展示出用法示意~

一、创建实例

1.​​create​​

​​create​​ 肯定不陌生吧?使用给定的订阅函数来创建 observable ;

// RxJS v6+
import { Observable } from 'rxjs';
/*
  创建在订阅函数中发出 'Hello' 和 'World' 的 observable 。
*/
const hello = Observable.create(function(observer) {
  observer.next('Hello');
  observer.next('World');
});

// 输出: 'Hello'...'World'
const subscribe = hello.subscribe(val => console.log(val));

2.​​empty​​

​​empty​​ 会给我们一个空的 observable,如果我们订阅这个 observable ,它会立即发送 complete 的讯息;

var source = Rx.Observable.empty();

source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log('complete!');
    },
    error: function(error) {
        console.log(error)
    }
});
// complete!

3.​​from​​

用 ​​from​​ 来接收任何可列举的参数(JS 数组);

// RxJS v6+
import { from } from 'rxjs';

// 将数组作为值的序列发出
const arraySource = from([1, 2, 3, 4, 5]);
// 输出: 1,2,3,4,5
const subscribe = arraySource.subscribe(val => console.log(val));

4.​​of​​

与 ​​from​​ 相似的 ​​of​​,也是用于操作一个 list,按顺序发出任意数量的值;

// RxJS v6+
import { of } from 'rxjs';

// 依次发出提供的任意数量的值
const source = of(1, 2, 3, 4, 5);
// 输出: 1,2,3,4,5
const subscribe = source.subscribe(val => console.log(val));

5.​​fromEvent​​

​​fromEvent​​ 将事件转换成 observable 序列;

// RxJS v6+
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

// 创建发出点击事件的 observable
const source = fromEvent(document, 'click');
// 映射成给定的事件时间戳
const example = source.pipe(map(event => `Event time: ${event.timeStamp}`));
// 输出 (示例中的数字以运行时为准): 'Event time: 7276.390000000001'
const subscribe = example.subscribe(val => console.log(val));

6.​​fromPromise​​

​​fromPromise​​ 创建由 promise 转换而来的 observable,并发出 promise 的结果;

var source = Rx.Observable
  .fromPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello RxJS!');
    },3000)
  })

// 等同于
var source = Rx.Observable
  .from(new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello RxJS!');
    },3000)
  }))

7.​​interval​​

显然,​​interval​​ 操作和时间有关,它基于给定时间间隔发出数字序列;

// RxJS v6+
import { interval } from 'rxjs';

// 每1秒发出数字序列中的值
const source = interval(1000);
// 数字: 0,1,2,3,4,5....
const subscribe = source.subscribe(val => console.log(val));

// import { interval } from 'rxjs';
// const source = interval(1000);
// 等同于
// var source = Rx.Observable.interval(1000);

8.​​timer​​

​​timer​​ 是 ​​interval​​ 的升级,用于给定持续时间后,再按照指定间隔时间依次发出数字。

// RxJS v6+
import { timer } from 'rxjs';

/*
  timer 接收第二个参数,它决定了发出序列值的频率,在本例中我们在1秒发出第一个值,
  然后每2秒发出序列值
*/
const source = timer(1000, 2000);
// 输出: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

到此这篇关于JavaScript中的observables 操作符创建实例的文章就介绍到这了,更多相关observables 操作符创建实例内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 利用Angular2的Observables实现交互控制的方法

    在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Observable的区别,网上有很多文章,推荐egghead.io上的这个7分钟的视频(作者 Ben Lesh).在这个视频的介绍中,主要说的,使用Observable创建的异步任务,可以被处理,而且是延时加载的.这篇文章里,我们主要针对一些在跟服务器端交互的时候遇到的问题,来看看Observable给我们

  •  javascript数组中的findIndex方法 

    目录 1findIndex()简单介绍 2编辑器 3代码部分 4运行结果 5总结 1findIndex()简单介绍 findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置(注:find()返回的是元素),之后的值不会再调用执行函数.如果没有符合条件的元素返回 -1(注:find()返回的是undefined). findIndex()与find()的使用方法相同,

  • 一起来了解JavaScript的变量作用域

    目录 1.变量作用域的分析 2.var关键字 3.let和const关键字 4.var.let和const的对比 总结 1.变量作用域的分析 首先,我们先研究一下JavaScript的变量作用域,研究作用域,我们不按照常规的文章那样解释概念,而是先给一个小demo,吊一下大家的胃口: var a = 1; var b = 2; function pomp(){ alert(a); alert(b); b = 2; alert(b); var a = 3; alert(a); } pomp();

  • JavaScript中的observables 操作符创建实例

    目录 一.创建实例 1.​​create​​ 2.​​empty​​ 3.​​from​​ 4.​​of​​ 5.​​fromEvent​​ 6.​​fromPromise​​ 7.​​interval​​ 8.​​timer​​ 操作符是 observables 背后的马力,为复杂的异步任务提供了一种优雅的声明式解决方案. 本篇就带领大家 “粗略” 过一下 observable 创建实例的重点 API 都有哪些?以及用代码片段展示出用法示意~ 一.创建实例 1.​​create​​ ​​cre

  • JavaScript中的typeof操作符用法实例

    对一个值使用typeof操作符可能返回下列某个字符串:"undefined"--如果这个值未定义"boolean"--如果这个值是布尔值"string"--如果这个值是字符串"number"--如果这个值是数值"object"--如果这个是对象或null"function"--如果这个值是函数 常用的typeof操作符的返回值包括number.string.boolean.undefin

  • JavaScript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

  • Javascript中的delete操作符详细介绍

    一.变量 说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系. javascript中,变量和对象属性关系非常微妙,甚至可以很多时候会被等同起来,因为 javascript 在执行脚本之前会创建一个global对象,在浏览器中就是window对象,所有的全局变量都是这个global对象的属性,执行函数时也会创建一个activation对象,所有的局部变量都是这个activation对象的属性.这些可以大家可以去了解一下javascript

  • 模拟javascript中的sort排序(简单实例)

    一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • JavaScript中Promise的使用方法实例

    目录 前言 Promise简介 什么是回调地狱? Promise的特点 创建Promise实例 then方法 resolve 和 reject 的参数传递 then()链式调用 then()的返回值 catch方法 finally方法 Promise的方法 Promise.resolve() Promise.reject() Promise.all() Promise.allSettled() Promise.race() async 和 await async函数函数 await 异步函数的错

  • JavaScript中的this妙用实例分析

    本文实例讲述了JavaScript中的this妙用.分享给大家供大家参考,具体如下: JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数. 我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript中localStorage对象存储方式实例分析

    本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

  • JavaScript中的ubound函数使用实例

    JavaScript中ubound函数方法是返回在 VBArray 的指定维中所使用的最大索引值.使用方法: 复制代码 代码如下: safeArray.ubound(dimension) 其中safeArray是必选项.是一个 VBArray 对象. dimension是可选项.要获知其索引上界的 VBArray 的维数.如果忽略,ubound 将该参数作为 1 进行处理. 如果 VBArray 为空,ubound 方法将返回 undefined.如果 dim 大于 VBArray 的维数或为负

随机推荐