今天完成的事情：

解决昨天搜索判断出现的问题
明天计划的事情：

增加功能
遇到的问题：

无
收获：

小课堂

RxJS是什么

RxJS它是一种针对异步数据流程的编程，简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流 进行出来，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅事项你所需要的功能。

RxJS里面提供很多模块，这里主要是常用的2个Observable和fromEvent

异步编程几种方法

1回调函数

2事件监听/发布订阅

3Promise

4RxJS

先创建一个服务组件调用这个服务里面的方法

getData(){//实验样本

    return 'this is service data';

  }

这个方法是同步方法

注意

如果获取异步数据

代码如下

服务里面方法

 getCallbackData(){//异步方法获取

    setTimeout(() => {//定时器

      var name = "张三";

    }, 1000);

  }

组件代码

 let callbackData =  this.request.getCallbackData();

    console.log(callbackData);

打印出来的是个undefined未定义 如果这么写是获取不到异步数据的。

想要获取异步数据可以用回调函数如

代码如下

服务方法

getCallbackData(cs){//异步方法获取

    setTimeout(() => {//定时器

      var name = "张三";

      cs(name);

    }, 1000);

  }

在这方法括号随便打个字母，然后在外部进行回调函数

let callbackData =  this.request.getCallbackData((abc)=>{

      console.log(abc);

    });

就打印出 名字张三

第二种方法

用promise请求异步数据

promise对象是对未来将要发生的事情，用来传递异步操作的消息

then 方法

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

同时他本身自带2个参数resolve可以理解为成功后执行,reject是没成功后怎么办

代码如下

服务里面的方法

getPromiseData(){//异步方法获取

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

    setTimeout(() => {//定时器

      var name = "张三--promise";

      resolve(name);

    }, 1000);

    },);

  }

外部调用

  var promiseData = this.request.getPromiseData();

   console.log( promiseData);

   promiseData.then((a)=>{

    console.log(a);

   })

效果图

得到2种方法的打印出来的结果

使用rxjs方法来调用异步

首先第一步就是在你要用的地方引入rxjs它是已经安装好的直接使用。

//引入服务

import { RequestService } from '../service/request.service';

然后在服务代码

getRxjsData(){

    return new Observable((observer)=>{

      setTimeout(() => {//定时器

        var name = "张三--rxjs";

          observer.next(name);

          //observer.error()这是返回失败的数据

      }, 1000);

这里要注意下.next是以参数的形式传进去，直接传入以个Observer对象,可以理解为传输数据。

外部方法获取数据

var rxjs = this.request.getRxjsData();

   rxjs.subscribe((n)=>{

   console.log(n)

   })

这里的获取数据subscribe可以理解为获取数据的方法。

效果如下

我们发现rxjs和promise的方法很类似，比如我们在服务里面获得参数返回数据，promise方法是resolve()   ,  rxjs的方法是next()来返回数据

外部调用数据。

rxjs用的subscribe()【订阅】来调用.   promise方法是then()来调用写法也差不多一样.

在rxjs可以中途撤回，rxjs可以发射多个值rxjs提供多种工具函数等等

Rxjs unsubscribe 取消订阅

代码如下

ar rxjs = this.request.getRxjsData();

  var d =   rxjs.subscribe((n)=>{

   console.log(n)

   });

   setTimeout(()=>{

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

   },1000)

  }

}

通过D的值直接在定时器里面1秒钟后取消订阅。

我们可以发现 在promise创建后，动作是无法撤回的，但是Observable不一样，可以动过unsbscribe()方法中途撤回，而且Observable在内部做了只能处理、

rxJs订阅后多次执行

异步多次获取代码

服务组代码

getRxjs(){

  let cs = 0;

  return new Observable((observer)=>{

    setInterval(() => {//定时器

     cs++

      var name = "张三--多次执行" + cs;

        observer.next(name);

        //observer.error()这是返回失败的数据

    }, 1000);

  })

}

外部调用

var rxjs1 = this.request.getRxjs();

   rxjs1.subscribe((n)=>{

   console.log(n)

   });

效果

注意：

promise创建后

setInterval定时器，是不能多次执行的，它是执行一次就没了。

Angular.x以后Rxjs6.x的变化以及使用

俗称工具方法

常用工具2个

Filter map  这个2 个 通俗解释就是filter对数据进行过滤过滤完后，map通过过滤后进行处理。

注意 要用这个2 工具的需要在用到的地方进行引入。

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

在rxjs/operators这个模块

然后我们看到 通过可以使用map和filter

代码如下

通过定时器

getRxjsNum(){

  let cs = 0;

  return new Observable((observer)=>{

    setInterval(() => {//定时器

      cs++

        observer.next(cs);

        //observer.error()这是返回失败的数据

    }, 1000);

  })

};

外部进行调用

   var rxjs2 = this.request.getRxjsNum();

   rxjs2.pipe(

    filter((cs:any)=>{

      if( cs % 2 == 0){

     return true;

      }

    })

  ).subscribe((n)=>{

   console.log(n)

   });

filter必须要有这个工具才可以进行必要的筛选 获得当cs的偶数时候才返回值。

这里需要注意下要用到管道pipe方法。

map是重新修改数组。

代码如下

 var teacher:any;

   var rxjs2 = this.request.getRxjsNum();

   rxjs2.pipe(

    map((cs:any)=>{

      if( cs % 2 == 0){

     return cs * cs;

      }

    })

  ).subscribe((n:any)=>{

     teacher = n;

   console.log(n)

   });

  }

}

这要注意如果用的是判断那么它返回的值不经有数值还有不符符合判断的是未定数值如图

所以可以和filter结合在一起用值接和管道挨着写就行

var teacher:any;

   var rxjs2 = this.request.getRxjsNum();

   rxjs2.pipe(

     filter((cs:any)=>{

            if( cs % 2 == 0){

           return true;

            }

          }),

    map((cs:any)=>{

     return cs * cs;

    })

  ).subscribe((n:any)=>{

     teacher = n;

   console.log(n)

   });

返回的就没有那个未定义数值.