angularJS -- RXJS 的用法

JS -- 获取异步数据的方式:

  1. 回调函数

  2. Promise

  3. 事件订阅

  4. RxJS -- V6.0 +

1. 回调函数方式获取异步数据

延时器模拟异步数据:

getCallData(cb) {

setTimeout(() => {

var userName = "ABC"

cb && cb(userName)

}, 1000);

}

调用:

    /*

回调函数获取异步数据

*/

this.request.getCallData((data: any)=>{

console.log(data, "回调函数方式获取异步数据")

})

2. Promise 获取异步数据

promise 对象 resolve 数据,reject 返回错误:

getPromiseData() {

return new Promise((resolve, reject)=>{

setTimeout(() => {

var userName = "promise-data"

resolve(userName)

     reject(err)

}, 1000);

})

}

调用:

    /*

Promise 获取异步数据

*/

let promiseData = this.request.getPromiseData()

promiseData.then((data)=>{

console.log("promise 获取异步数据:", data)

})

3. Rxjs 获取异步数据

定义方法时,return 出一个 Observable 对象, 通过 .next(data) 抛出数据, .error(错误信息) 抛出错误

import { Observable } from ‘rxjs‘

getRxjsData() {

return new Observable((observer)=>{

setTimeout(() => {

var userName = "RXJS-data"

observer.next(userName)

}, 3000);

})

}

调用-接收时,通过 subscribe 订阅:

    /*

RXjs 获取异步数据

*/

let rxjsData = this.request.getRxjsData()

let d = rxjsData.subscribe((data)=>{

console.log("rxjs 获取异步数据", data)

})



Promise 和 rxJS 对比:

1. promise 方式,不能中断。而RxJs方式可以打断

实例:

    /*

RXjs 获取异步数据

*/

let rxjsData = this.request.getRxjsData()

let d = rxjsData.subscribe((data)=>{

console.log("rxjs 获取异步数据", data)

})

// rxjs 订阅取消 - 1秒后打断,不返回数据

setTimeout(()=>{

// d.unsubscribe()

}, 1000)

2. interVal 多次执行 promise 只能执行一次,而 RxJS 可以多次执行

promise interval 实例:

定义:

// 多次执行 promise

getPromiseIntervalData() {

return new Promise((resolve, reject)=>{

setInterval(() => {

var userName = "promise-data-interval"

resolve(userName)

}, 1000);

})

}

调用:

/**

* 多次执行promise, 只执行一次

*/

let promiseIntervalData = this.request.getPromiseIntervalData()

promiseIntervalData.then((data)=>{

console.log("promise-interval 获取异步数据:", data)

})

RxJS interval 实例:

定义:

// 多次执行 rxjs

getRxjsIntervalData() {

return new Observable((observer)=>{

setInterval(() => {

var userName = "RXJS-data-interval"

observer.next(userName)

}, 1000);

})

}

调用:

    /**

* 多次执行rxjs, 正常执行

*/

let rxjsIntervalData = this.request.getRxjsIntervalData()

rxjsIntervalData.subscribe((data)=>{

console.log("RXJS-interval 获取异步数据:", data)

})




angular 中的 rxjs 的工具函数 -- filter, map

申明:

 

import { Observable } from ‘rxjs‘

// rxjs 申明 Observable 对象

getRxjsUtilsData() {

let count = 0

return new Observable((observer)=>{

setInterval(() => {

count++

observer.next(count)

}, 1000);

})

}

工具方法的使用:

  

    import { filter,map } from ‘rxjs/operators‘

    

    /*

rxjs 提供的工具方法-filter

*/

let stream = this.request.getRxjsUtilsData()

stream.pipe(

filter((value: any)=>{

if(value%2==0) {

return true

}

})

).subscribe((data)=>{

console.log("RXJS-filter数据:", data)

})

/*

rxjs 提供的工具方法-map

*/

let stream = this.request.getRxjsUtilsData()

stream.pipe(

map((value: any)=>{

return value*value

})

).subscribe((data)=>{

console.log("RXJS-map数据:", data)

})

/*

rxjs 提供的工具方法-map,filter 管道连写

*/

let stream = this.request.getRxjsUtilsData()

stream.pipe(

filter((value: any)=>{

if(value%2 == 0) {

return true

}

}),

map((value: any)=>{

return value*value

})

).subscribe((data)=>{

console.log("RXJS-工具方法处理数据:", data)

})



angularJS -- RXJS 的用法

原文地址:https://www.cnblogs.com/monkey-K/p/11619446.html

时间: 2024-11-08 21:36:38

angularJS -- RXJS 的用法的相关文章

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

AngularJS的Filter用法详解

Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expression | filter:argument1:argument2:... }} AngularJS内建的Filter Angu

转:AngularJS的Filter用法详解

Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expression | filter:argument1:argument2:... }} AngularJS内建的Filter Angu

angularjs之Restangular用法

参考资料: 学习-[前端]-angularjs基本框架以及向服务器发送请求的方法 Restangular on Angular

跟我学AngularJs:Directive指令用法解读(上)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性

前端菜鸟学习AngularJS(标签用法)

ng-model ng-class ng-if 双向绑定 ionic.bunle.min.js getJSON $Socpe.draw()

AngularJS的指令用法

scope的绑定策略: @ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入 {{}}即可 示例代码: scopeAt.html <!doctype html><html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-

angularjs ng-bind-html的用法总结

本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用n