angular6 Rxjs异步数据流

Observable异步获取数据的基本模型

import { Observable } from 'rxjs';

// Observable异步获取数据
let stream = new Observable((observer) => {
  setTimeout(function () {
    observer.next({
      name: 'huangbiao',
      age: 30
    });
  }, 3000);
});
stream.subscribe(function(data){
  console.dir(data); // 打印的是 {name: 'huangbiao',age: 30}
  debugger
});

取消订阅

import { Observable } from 'rxjs';

// Observable异步获取数据
let stream = new Observable((observer) => {
  setTimeout(function () {
    observer.next({
      name: 'huangbiao',
      age: 30
    });
  }, 3000);
});
let subHandle = stream.subscribe(function(data){
  console.dir(data); // 打印的是 {name: 'huangbiao',age: 30}
  debugger
});
// 取消订阅,就不会执行 订阅内部的方法了
subHandle.unsubscribe();

订阅后多次执行

import { Observable } from 'rxjs';

let stream = new Observable((observer) => {
  let count = 0;
  setInterval(function () {
    count++;
    observer.next('count: ' + count);
  }, 3000);
});

stream.subscribe(function (data) {
  console.log(data);
});

Rxjs 的工具函数

import { Observable } from 'rxjs';
import {map,filter,throttleTime} from 'rxjs/operators';

let stream = new Observable((observer) => {
  let count = 0;
  setInterval(function () {
    count++;
    observer.next(count);
  }, 3000);
});
stream.pipe(map(function (resourceData) {
  return resourceData * resourceData;
})).subscribe(function (data) {
  console.log(data);
});
import {Observable,fromEvent} from 'rxjs';
import {map,filter,throttleTime} from 'rxjs/operators';

var button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(1000)
)
.subscribe(() => console.log(`Clicked`));
  1. map用来处理数据
  2. filter用来过滤数据
  3. throttleTime 用来推迟响应数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值