广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的observables 操作符创建实例
  • 706
分享到

JavaScript中的observables 操作符创建实例

2024-04-02 19:04:59 706人浏览 薄情痞子
摘要

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

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

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

一、创建实例

1.​​create​​

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

// Rxjs v6+
import { Observable } from 'rxjs';

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';


const source = timer(1000, 2000);
// 输出: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

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

--结束END--

本文标题: JavaScript中的observables 操作符创建实例

本文链接: https://www.lsjlt.com/news/142719.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中的observables 操作符创建实例
    目录一、创建实例1.​​create​​2.​​empty​​3.​​from​​ 4.​​of​​5.​​fromEvent​​6.​​fromPromise​​7.​​...
    99+
    2022-11-13
  • java中实现创建目录与创建文件的操作实例
    目录一、创建目录二、创建文件三、同时创建目录和文件补充知识:getParentFile()方法和getParent()的区别总结一、创建目录 mkdir()—&mdash...
    99+
    2023-01-18
    java创建目录创建文件目录和文件 Java创建文件和文件夹 java创建目录和文件
  • JavaScript的运算符和操作数实例分析
    这篇文章主要介绍“JavaScript的运算符和操作数实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的运算符和操作数实例分析”文章能帮助...
    99+
    2022-10-19
  • JavaScript中的操作符与表达式实例代码分析
    这篇文章主要介绍“JavaScript中的操作符与表达式实例代码分析”,在日常操作中,相信很多人在JavaScript中的操作符与表达式实例代码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScr...
    99+
    2023-07-04
  • Javascript中字符串和数字的操作示例
    小编给大家分享一下Javascript中字符串和数字的操作示例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、length – 返回字符串的长度‘abcd'.length;&nb...
    99+
    2022-10-19
  • JavaScript中new操作符的原理示例详解
    new的用处 new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 先来总结一下 创建一个空对象 空对象的内部属性 __pr...
    99+
    2022-11-12
  • JavaScript展开操作符的示例分析
    这篇文章主要介绍JavaScript展开操作符的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!你可以通过展开操作符(Spread operator)...扩展一个数组对象和字...
    99+
    2022-10-19
  • 操作MySQL实现简单的创建库和创建表
      目录              操作数据库                    创建数据库                    查看数据库                    选择数据库                  ...
    99+
    2023-09-09
    mysql
  • JavaScript中怎么实现字符串操作
    JavaScript中怎么实现字符串操作,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1. 拆分字符串JavaScript中的 split() 方法使用指定的分隔符字符串将一个...
    99+
    2023-06-20
  • python中csv文件创建、读取及修改等操作实例
    1. python中创建新的csv文件 (1). 使用csv.writer()创建: 代码如下: import csv headers = ['学号','姓名','分数'] ro...
    99+
    2022-11-11
  • Python的字符串操作简单实例
    目录实例1:获取星期字符串实例2:获取月份字符串实例3:恺撒密码实例1:获取星期字符串 程序读入一个表示星期几的数字(1~7),输出对应的星期字符串名称。例如,输入 3,返回&ldq...
    99+
    2023-05-15
    Python字符串 Python字符串操作
  • JavaScript二叉搜索树构建操作实例分析
    本篇内容介绍了“JavaScript二叉搜索树构建操作实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是二叉搜索树二叉搜索树首先它...
    99+
    2023-07-02
  • JavaScript中new操作符的作用是什么
    这篇文章给大家介绍JavaScript中new操作符的作用是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScrip...
    99+
    2023-06-06
  • 实例详解Linux 中的命令链接操作符
    && 与 || 配合 eg: cat test.sh #!/bin/bash [ -e /etc/hosts ] && echo "ok" || echo wSIRBKV"fail" bash test.sh o...
    99+
    2022-06-04
    linux 命令链接操作符 linux 操作符
  • C语言中单目操作符++、–的实例讲解
    目录前言++单目操作符- -单目操作符附1:代码演示:演示代码提取:总结前言 大家先判断下下面代码的运行结果 答案: 如果你全对了,那么恭喜大佬,这篇博客可能对你收益不大,全...
    99+
    2022-11-12
  • C语言中单目操作符++、–的实例分析
    C语言中单目操作符++、–的实例分析,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。前言大家先判断下下面代码的运行结果答案:如果你全对了,那么恭喜大佬,这篇博客可能对你收益不大,...
    99+
    2023-06-22
  • JavaScript中new操作符的原理与实现详解
    目录一、new做了哪些事二、返回不同类型时有哪些表现三、手写new的实现原理一、new做了哪些事 先看看new的使用场景: // 1、创建一个构造函数 function Vehicl...
    99+
    2022-11-13
    JavaScript new操作符 JavaScript new
  • Javascript中的堆、栈操作示例
    这篇文章将为大家详细讲解有关Javascript中的堆、栈操作示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。堆、栈都是一种数据项按序排列的数据结构,它涉及到数据在内存中的存储方式,Javascript...
    99+
    2023-06-14
  • JavaScript的节点操作实例分析
    今天小编给大家分享一下JavaScript的节点操作实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2022-10-19
  • mysql中in操作符的示例分析
    这篇文章给大家分享的是有关mysql中in操作符的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在之前学习其他模块的时候,我们接触到了in操作符,不过在mysql数据库中很多人就不知道怎么运用了。我们今天...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作