【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x

【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x

目录标题

  • 一级目录
    • 二级目录
      • 三级目录
    • 〇、编程里的异步
    • 1异步编程常见的几种方法
    • 2 代码示例其中的一些方法:
      • 1. 回调函数(Callback Functions)
      • 2. 事件监听/发布订阅(Event Listeners / Pub-Sub)
      • 3. Promise
      • 4. RxJS
    • 一、Rxjs介绍
      • 1 使用RxJS的处理HTTP异步请求例子:
    • 二、Promise(async/await语法糖)和RxJS处理异步对比
    • 三、Rxjs unsubscribe取消订阅
    • 四、Rxjs订阅后多次执行
    • 五、Angualr6.x之前使用Rxjs的工具函数map filter
    • 六、Angualr6.x以后Rxjs6.x的变化以及使用
    • 七、Rxjs延迟执行
    • 八、Rxjs把Dom事件转化成流
    • 九、Rxjs--在angular组件中 进行学习
      • 1异步获取返回的数据--回调函数方法
      • 2 异步获取返回的数据--promise方法
      • 3异步获取返回的数据--rxjs
      • 4 撤销获取数据 Rxjs unsubscribe取消订阅
      • 5 Rxjs订阅后多次执行(持续获取异步的数据)
      • 6 Rxjs的工具函数map filter
        • 1 简单的例子解释 map 和 filter 操作符。
          • 1map
          • 2filter
        • 2 回到 Angular 中的 map 和 filter
          • 1 filter使用
          • 2 map使用
        • 3 filter & map结合使用

一级目录

二级目录

三级目录

异步与 Rxjs6.x异步数据流编程-Angular Rxjs快速入门
一、 Rxjs介绍
二、 Promise和RxJS 处理异步对比
三、 Rxjs unsubscribe取消订阅
四、 Rxjs 订阅后多次执行
五、 Angualr6.x之前使用Rxjs的工具函数map filter
六、 Angualr6.x 以后 Rxjs6.x的变化以及使用
七、 Rxjs延迟执行
八、 Rxjs把Dom事件转化成流

〇、编程里的异步

异步编程是一种编程范式,它允许程序在等待某个长时间运行的任务(如访问网络、文件系统操作、计时器等)完成时继续执行其他任务,而不是停下来等待任务完成。在JavaScript和Angular中,异步编程特别重要,因为它帮助避免阻塞UI渲染和用户交互,从而提高应用的响应性和性能。

1异步编程常见的几种方法

  • 回调函数(Callbacks)
    最早的异步编程方法之一。
    可以导致回调地狱,代码难以阅读和维护。
  • 事件监听/发布订阅(Event Listeners / Pub-Sub)
    允许多个部分的代码响应事件。
    在Angular中,可以通过EventEmitter来实现组件间的通信。
  • Promise
    ES6引入的异步编程构造。
    允许附加.then()和.catch()方法来处理异步操作的成功或失败。
  • Async/Await
    ES2017引入的,建立在Promise之上的语法糖。
    允许以更同步的方式编写异步代码。
  • RxJS Observables
    RxJS是一个专门用于异步编程和事件的库。
    提供了强大的数据流控制能力,比如映射、过滤、合并等。
  • NgZone
    Angular的NgZone服务提供了一个执行上下文,能够自动为执行变更检测。
    通常在与Angular变更检测系统集成不良的第三方库中使用。
    异步编程在Angular中是由框架的变更检测机制和区域(Zone.js)自动管理的。这意味着当异步事件如HTTP响应到达时,Angular知道何时运行变更检测,以确保UI是最新的。

2 代码示例其中的一些方法:

1. 回调函数(Callback Functions)

这是最基础的异步编程技术。通过将一个函数(回调函数)作为参数传递给另一个函数,在特定的操作完成时执行。


function doAsyncTask(cb) {
  setTimeout(() => {
    console.log('Async Task Calling Callback');
    cb();
  }, 1000);
}

doAsyncTask(() => console.log('Callback Called'));

2. 事件监听/发布订阅(Event Listeners / Pub-Sub)

这种模式允许订阅一个事件,并在事件发生时执行一些操作。在Angular中,可以使用EventEmitter和@Output装饰器来实现组件间(如上一章节的父子组件间)的事件通信。


import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-event-emitter',
  template: '',
})
export class EventEmitterComponent {
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

3. Promise

Promise是ES6中引入的,用于表示一个异步操作的最终完成(或失败)及其结果值。


function doAsyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Async Task Complete');
      resolve();
    }, 1000);
  });
}

doAsyncTask().then(() => console.log('Task Done!'));

4. RxJS

RxJS是Angular推荐的异步编程模型,它提供了一个强大的Observable类型。这是一个能够发射多个值的流,并且可以用各种强大的操作符来处理这些值。


import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

of('Hello World').pipe(delay(1000)).subscribe(console.log);

在Angular中,RxJS是处理事件和异步操作的首选方式,因为它提供了更高的灵活性、可组合性和强大的操作符集合,更适用于复杂的应用程序。它被广泛应用在Angular的HTTP服务、表单事件和状态管理等场景中。

一、Rxjs介绍

RxJS是Reactive Extensions For JavaScript的缩写,它提供了一种模型来处理时间序列上的事件。RxJS使用了Observables和一系列操作符来处理异步事件。

Angular的HttpClient服务返回的Observable对象是处理HTTP异步请求的例子。这些Observable可以被订阅,以在数据到达时更新UI。

1 使用RxJS的处理HTTP异步请求例子:


import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class MyService {
  constructor(private http: HttpClient) {}

  getData(): Observable<MyDataType> {
    return this.http.get<MyDataType>('/api/data');
  }
}

在组件中使用服务:


export class MyComponent implements OnInit {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getData().subscribe(data => {
      console.log(data);
      // 更新UI
    });
  }
}

这里,getData方法发起HTTP请求并返回Observable。组件订阅这个Observable,并在数据到达时响应。由于使用了HttpClient,Angular会自动处理变更检测,所以不需要手动触发。

二、Promise(async/await语法糖)和RxJS处理异步对比

Promise: 一次性的异步操作,无法取消,不支持重试。
RxJS: 可以被取消,支持重试、过滤、转换等,可以表示多个值。

“语法糖”(Syntactic Sugar)是一个编程术语,指的是在编程语言中添加的某种语法,这种语法对语言的功能并没有影响,但是可以使代码更易读、更易写。换句话说,语法糖就是让人们编写代码时更加方便的语法。

这种语法让开发者用更简洁、更清晰的代码来实现相同的功能,通常隐藏了一些实现的复杂性。语法糖让代码更接近自然语言,减少了编程的冗余,使得代码更加简洁。

例如,在JavaScript中,async/await 是一个常见的语法糖。它们让用同步的方式写出异步的代码,其背后实际上是基于Promise的。

不使用语法糖的代码示例(使用Promise):


function fetchData() {
  return getData() // 返回一个Promise
    .then(data => {
      return 'Done with data: ' + data;
    });
}

使用async/await语法糖的代码示例:


async function fetchData() {
  const data = await getData(); // 等待Promise解决
  return 'Done with data: ' + data;
}

在这个例子中,async/await 使得异步代码看起来和同步代码非常相似,从而使得代码更容易理解和维护。尽管async/await 看起来像是同步执行,但它们实际上还是异步的,它们只是让异步代码的书写和阅读变得更容易。

三、Rxjs unsubscribe取消订阅

取消订阅是RxJS中管理Observable订阅的过程,用来防止内存泄漏。


import { Subscription } from 'rxjs';

const subscription: Subscription = observable.subscribe(
  value => console.log(value),
  error => console.error(error),
  () => console.log('Completed!')
);

// 取消订阅
subscription.unsubscribe();

四、Rxjs订阅后多次执行

Observables可以发送多个值,并且可以订阅这些值。


import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  setTimeout(() => {
    subscriber.next(3);
    subscriber.complete();
  }, 1000);
});

observable.subscribe(value => console.log(value));

五、Angualr6.x之前使用Rxjs的工具函数map filter


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

const observable = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
}).pipe(
  filter((value) => value > 1),
  map(value => value * value)
);

observable.subscribe(value => console.log(value));

六、Angualr6.x以后Rxjs6.x的变化以及使用

RxJS 6.x 有很大的变化,比如引入了管道(pipeable)操作符。


import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5);
const result$ = source$.pipe(map(val => val * 10));
result$.subscribe(console.log);

七、Rxjs延迟执行

使用delay操作符可以延迟Observable发出的值。


import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

of('Hello World!').pipe(delay(1000)).subscribe(console.log);

八、Rxjs把Dom事件转化成流

RxJS可以把DOM事件转化为Observable流。


import { fromEvent } from 'rxjs';

const button = document.querySelector('button');
const myObservable = fromEvent(button, 'click');
myObservable.subscribe(event => console.log(event));

以上是各个主题的简要介绍和代码示例。在实际的Angular应用程序中,会把这些代码片段整合到服务或组件中去管理数据流和事件。

九、Rxjs–在angular组件中 进行学习

1异步获取返回的数据–回调函数方法

异步‘
假设你想拿一个数据但是这个数据给到你需要时间,怎么让程序不会直接在还没拿到时候就报错或者跳过去

服务 request.service.ts

import { Injectable } from '@angular/core';
import { timeout } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RequestService {
  constructor() {}
  // 执行顺序1  同步方法
  getData() {
    return '这是一个服务数据';
  }
  // 2 模拟异步方法
  //  1

  /*   getCallbackData() {
    // 执行顺序2

    setTimeout(() => {
      // 执行顺序4
      var data = '张三';
      return data;

    }, 1000);
    // 执行顺序3

    //会报错,因为 异步数据无法在外部直接获取  因此要写回调函数
  } */
  getCallbackData(cb: any) {
    /* ---------------cb回调函数 
home组件中     // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 
传给cd 然后 在本服务中 调用 
 */

    setTimeout(() => {
      var username = '张三';

      // return username;
      /* cd 即 function (data)=>{
  console.log(data);
  }
  */

      cb(username);
    }, 1000);
  }
}


子组件 home上使用服务

import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  ngOnInit() {
    //1同步方法
    let data = this.myRequest.getData();
    console.log(data);
    // 2异步方法----回调函数 
    /*  
    let calllbackData = this.myRequest.getCallbackData();
    console.log(calllbackData); 

     //会报错undedined,因为 异步数据无法在外部直接获取  因此要写回调函数  (data:any)=>{} 在回调函数的方法体内 
    */

    let calllbackData = this.myRequest.getCallbackData((data: any) => {
      console.log(data);
    });
    
    // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 传给cd 然后 在服务中 调用
  }
}

2 异步获取返回的数据–promise方法

服务 request.service.ts

import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  ngOnInit() {
    //1同步方法
    let data = this.myRequest.getData();
    console.log(data);
    // 2异步方法----回调函数
    /*  
    let calllbackData = this.myRequest.getCallbackData();
    console.log(calllbackData); 

     //会报错undedined,因为 异步数据无法在外部直接获取  因此要写回调函数  (data:any)=>{} 在回调函数的方法体内 
    */

    let calllbackData = this.myRequest.getCallbackData((data: any) => {
      console.log(data);
    });

    // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 传给cd 然后 在服务中 调用

    //3  promise 获取异步数据
    var promiseData: any = this.myRequest.getPromiseData();
    promiseData.then((data: any) => {
      console.log(data);
    });
  }
}

子组件 home

import { Injectable } from '@angular/core';
import { timeout } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RequestService {
  constructor() {}
  // 执行顺序1  同步方法
  getData() {
    return '这是一个服务数据';
  }
  // 2 模拟异步方法
  //  1

  /*   getCallbackData() {
    // 执行顺序2

    setTimeout(() => {
      // 执行顺序4
      var data = '张三';
      return data;

    }, 1000);
    // 执行顺序3

    //会报错,因为 异步数据无法在外部直接获取  因此要写回调函数
  } */
  getCallbackData(cb: any) {
    /* ---------------cb回调函数 
home组件中     // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 
传给cd 然后 在本服务中 调用 
 */

    setTimeout(() => {
      var username = '张三';

      // return username;

      cb(username);
    }, 1000);
  }

  getPromiseData() {
    /* ---------------不用cb回调函数 
home组件中     // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 
传给cd 然后 在本服务中 调用 
 */
    // promise()方法 并在里面传入一个function  () =>{ } 方法 ,() =>{ }方法里面有两个参数 resolve 和 rejecte 表示 成功和失败后的回调函数
    return new Promise((resolve, rejecte) => {
      setTimeout(() => {
        var username = '张三---promiise';

        //1同步return username;
        //2 回调函数 cb(username);
        //3
        resolve(username);
      }, 1000);
    });
  }
}
function resolve(username: string) {
  throw new Error('Function not implemented.');
}

3异步获取返回的数据–rxjs

服务 request.service.ts



import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RequestService {
  constructor() {}
  // 执行顺序1  同步方法
  getData() {
    return '这是一个服务数据';
  }
  // 2 模拟异步方法
  //  1

  /*   getCallbackData() {
    // 执行顺序2

    setTimeout(() => {
      // 执行顺序4
      var data = '张三';
      return data;

    }, 1000);
    // 执行顺序3

    //会报错,因为 异步数据无法在外部直接获取  因此要写回调函数
  } */
  getCallbackData(cb: any) {
    /* ---------------cb回调函数 
home组件中     // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 
传给cd 然后 在本服务中 调用 
 */

    setTimeout(() => {
      var username = '张三';

      // return username;

      cb(username);
    }, 1000);
  }

  getPromiseData() {
    /* ---------------不用cb回调函数 
home组件中     // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 
传给cd 然后 在本服务中 调用 
 */
    // promise()方法 并在里面传入一个function  () =>{ } 方法 ,() =>{ }方法里面有两个参数 resolve 和 rejecte 表示 成功和失败后的回调函数
    return new Promise((resolve, rejecte) => {
      setTimeout(() => {
        var username = '张三---promiise';

        //1同步return username;
        //2 回调函数 cb(username);
        //3 传入待处理的数据 username
        resolve(username);
      }, 3000);
    });
  }
// 4 
  getRxjsData() {
    /* 通过 Observable,来return返回一个处理的对象 ,
在 Observable的(   )内传入一个异步的方法 ( )=> , 
异步的方法 ( )=>  的( )内,来传参数,一般可以传入任意的参数,但此参数 一般叫observer ,


处理异步的数据   
 */ return new Observable((observer) => {
  // setTimeout 一个定时器
                   setTimeout(() => {
                          var username = '张三---rxjs';

                          // resolve(username);
                          observer.next(username);
                          // 观测到数据后,传入数据,待返回使用  这就封装好了一个异步的rxjs方法 
                          // 然后再要使用的地方 subscribe订阅 就 
                        }, 3000);
    });
  }
}


子组件home



import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  ngOnInit() {
    //1同步方法
    let data = this.myRequest.getData();
    console.log(data);
    // 2异步方法----回调函数
    /*  
    let calllbackData = this.myRequest.getCallbackData();
    console.log(calllbackData); 

     //会报错undedined,因为 异步数据无法在外部直接获取  因此要写回调函数  (data:any)=>{} 在回调函数的方法体内 
    */

    let calllbackData = this.myRequest.getCallbackData((data: any) => {
      console.log(data);
    });

    // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 传给cd 然后 在服务中 调用

    //3  promise 获取异步数据
    var promiseData: any = this.myRequest.getPromiseData();
    promiseData.then((data: any) => {
      console.log(data);
    });

    // 4 rxjs获取异步方法里面的返回的数据
   /*      要在外部获取  使用 封装好的 getRxjsData异步方法里面返回的数据,即 observable方法观察到的observer这个观察对象
        获取异步方法里面的返回的数据 ,返回的observable的这个对象的rxjsData的subscribe 
        的使用一个变量rajxData来接收
        然后使用 订阅 subscribe 里面的rxjs的来打印出来此数据  */
/* promise 与   rxjs对比 

1  返回数据 ---promise 方法 resolve(username) rxjs里用 observe.next(username) 
2  获取异步方法里面的数据 ---promise 方法 promiseData.then rxjs用 rsjxData.subscribe(data)
3  rxjs更强大 
 */
    var rxjsData = this.myRequest.getRxjsData();
    rxjsData.subscribe((data) => {
      console.log(data);
    });
  }
}


4 撤销获取数据 Rxjs unsubscribe取消订阅

上述3 服务 request.service.ts中,异步方法rxjs的数据是设置的 3秒钟之后获得,
子组件home 在使用此rxjs时,可以设置定时器,通过判断数据获取的时间,来订阅、取消订阅。


import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  ngOnInit() {
    //1同步方法
    let data = this.myRequest.getData();
    console.log(data);
    // 2异步方法----回调函数
    /*  
    let calllbackData = this.myRequest.getCallbackData();
    console.log(calllbackData); 

     //会报错undedined,因为 异步数据无法在外部直接获取  因此要写回调函数  (data:any)=>{} 在回调函数的方法体内 
    */

    let calllbackData = this.myRequest.getCallbackData((data: any) => {
      console.log(data);
    });

    // (data: any) => {   console.log(calllbackData)  }整个回调函数 都做为 参数 传给cd 然后 在服务中 调用

    //3  promise 获取异步数据
    var promiseData: any = this.myRequest.getPromiseData();
    promiseData.then((data: any) => {
      console.log(data);
    });

    // 4 rxjs获取异步方法里面的返回的数据
    /*      要在外部获取  使用 封装好的 getRxjsData异步方法里面返回的数据,即 observable方法观察到的observer这个观察对象
        获取异步方法里面的返回的数据 ,返回的observable的这个对象的rxjsData的subscribe 
        的使用一个变量rajxData来接收
        然后使用 订阅 subscribe 里面的rxjs的来打印出来此数据  */
    /* promise 与   rxjs对比 

1  返回数据 ---promise 方法 resolve(username) rxjs里用 observe.next(username) 
2  获取异步方法里面的数据 ---promise 方法 promiseData.then rxjs用 rsjxData.subscribe(data)
3  rxjs更强大 
 */

    /* 5 功能 测试,因此注释      


// -var rxjsData = this.myRequest.getRxjsData();
   - // rxjsData.subscribe((data) => {
   - //   console.log(data);
   - // });
      代码   
      
      
      
      */

    // var rxjsData = this.myRequest.getRxjsData();
    // rxjsData.subscribe((data) => {
    //   console.log(data);
    // });

    // 5  外部调用时,设置中途撤回,如一秒钟未获得数据,就撤回刚才的操作

    var streem = this.myRequest.getRxjsData();
    // 把rxjs的obserable返回的对象 赋值给 stream 异步数据流
    var d = streem.subscribe((data) => {
      //  streem.subscribe(方法 来获取异步数据流里面的数据  (data) =>
      console.log(data);
      // 将数据 (data)进行处理 => { console.log(data); }); 此处是一个 console.log 控制台你打印 处理
    });

    //然后将返回的东西 赋值给一个变量 d  ,接下来通过一个定时器 timeout来设置超时取消

    setTimeout(() => {
      d.unsubscribe();

      // 1 取消订阅
      /* 
      注意语法错误:取消订阅的部分误写为 d.unsubscribe;这实际上并没有调用 unsubscribe 函数。
      正确的方式是 d.unsubscribe();。
      缺少括号意味着函数没有被调用,因此订阅没有被取消。
      */
    }, 1000);
    // 一秒钟未获得数据,就撤回刚才的操作

    /*   
 
 
 // 2 设置 第四秒 意味着  订阅数据 
  // }, 4000); // 将时间设置为大于Observable发送数据的时间

 */
  }
}



5 Rxjs订阅后多次执行(持续获取异步的数据)

request.service.ts服务内封装方法

  // 5 多次执行

  getRxjsIntervalData() {
    let count = 0;
    return new Observable<any>((observer) => {
      setInterval(() => {
        count++;
        var username = '张三--Rxjs-Interval' + count;
        observer.next(username);
        // observer.error('数据')
      }, 1000);
    });
  }

子组件 home使用

  // 这是一个同步方法
  ngOnInit(): void {
 // 6 多次执行

    // 这是一个同步方法
    //7、rxjs执行多次
    var streemInterval = this.myRequest.getRxjsIntervalData();

    streemInterval.subscribe((data: any) => {
      console.log(data);
    });**
  
  }

6 Rxjs的工具函数map filter

1 简单的例子解释 map 和 filter 操作符。
1map

假设有一个观察对象(Observable),它发出一系列数字,想对这些数字进行处理。

使用 map: 假设想将每个数字乘以 2。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

// 创建一个发出数字 1, 2, 3 的 Observable
const numbers$ = of(1, 2, 3);

// 使用 map 操作符将每个数字乘以 2
const doubledNumbers$ = numbers$.pipe(
  map(number => number * 2)
);

// 订阅并打印结果
doubledNumbers$.subscribe(console.log); // 输出将是 2, 4, 6

这里,map(number => number * 2) 会将每个发出的值乘以 2。

2filter

使用 filter: 假设只对大于 1 的数字感兴趣。

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

// 创建一个发出数字 1, 2, 3 的 Observable
const numbers$ = of(1, 2, 3);

// 使用 filter 操作符选择大于 1 的数字
const filteredNumbers$ = numbers$.pipe(
  filter(number => number > 1)
);

// 订阅并打印结果
filteredNumbers$.subscribe(console.log); // 输出将是 2, 3

在这个例子中,filter(number => number > 1) 只会通过那些大于 1 的值。

这些例子展示了如何使用 map 和 filter 操作符来转换和筛选 Observable 发出的值。通过这种方式,可以很方便地处理和操作异步数据流。

2 回到 Angular 中的 map 和 filter

服务
request.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RequestService {
  constructor() {}  
  
  
  getRxjsIntervalNum() {
    let count = 0;
    return new Observable<any>((observer) => {
      setInterval(() => {
        count++;
        observer.next(count);
        // observer.error('数据')
      }, 1000);
    });
  }

  }



1 filter使用

子组件ts


import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  // 这是一个同步方法
  ngOnInit(): void {
    var streemNum = this.myRequest.getRxjsIntervalNum();
    streemNum
      .pipe(
        filter((value: any): any => {
          // filter(value:any)要指定类型,否则会报错
          if (value % 2 == 0) {
            return true;
          }
        })
      )
      .subscribe((data: any) => {
        console.log(data);
      });
  }
}

控制台运行结果

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
core.mjs:26656 Angular is running in development mode.
home.component.ts:25 2
home.component.ts:25 4
home.component.ts:25 6
home.component.ts:25 8
home.component.ts:25 10
home.component.ts:25 12
home.component.ts:25 14
home.component.ts:25 16

…
2 map使用

子组件home

import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  // 这是一个同步方法
  ngOnInit(): void {

    // map 

    var streemNum = this.myRequest.getRxjsIntervalNum();
    streemNum
      .pipe(
        map((value) => {
          return value * value;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });

/* // filter 
    var streemNum = this.myRequest.getRxjsIntervalNum();
    streemNum
      .pipe(
        filter((value: any): any => {
          // filter(value:any)要指定类型,否则会报错
          if (value % 2 == 0) {
            return true;
          }
        })
      )
      .subscribe((data: any) => {
        console.log(data);
      });
      //  */
  }
}

控制台运行结果

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
core.mjs:26656 Angular is running in development mode.
home.component.ts:25 1
home.component.ts:25 4
home.component.ts:25 9
home.component.ts:25 16
home.component.ts:25 25
home.component.ts:25 36
。。。
3 filter & map结合使用

服务不变

子组件 filter & map结合使用

import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/services/request.service';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public myRequest: RequestService) {}
  // 这是一个同步方法
   // 这是一个同步方法
   ngOnInit(): void {
    var streemNum = this.myRequest.getRxjsIntervalNum();
    streemNum
      .pipe(
        filter((value:any):any => {
          if (value % 2 == 0) {
            return true;
          }
        }),
        map((value) => {
          return value * value;
        })
      )
      .subscribe((data) => {
        console.log(data);
      });
  }

}

控制台运行结果

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
core.mjs:26656 Angular is running in development mode.
home.component.ts:28 4
home.component.ts:28 16
home.component.ts:28 36
home.component.ts:28 64
home.component.ts:28 100
home.component.ts:28 144
home.component.ts:28 196

你可能感兴趣的:(angular.js,前端,javascript)