RxJS在Angular中的实战例子

一、输入框的联想输入

要求：

• 从输入中监听数据。（从keydown事件中获取事件宿主输入框中的值）
• 移除输入值中的前后空白符，并且长度符合要求
• 防抖（keyup时发送请求，这也会导致每敲一次键盘都会发出一次请求，如何优化？）
• 如果输入值没发生变化，则不用发出请求
• 如果已发出的ajax请求结果会因为后续的修改而变得无效，那就取消它

开发环境主要信息：

Angular5.x; RXJS:5.x

使用方式：

• 使用到什么就引入什么，节省打包后的体积

import { Observable } from 'rxjs/Observable';
import  'rxjs/add/observable/fromEvent'; 
import  'rxjs/add/operator/map'; 
import  'rxjs/add/operator/filter'; 
import  'rxjs/add/operator/debounceTime'; 
import  'rxjs/add/operator/distinctUntilChanged'; 
import  'rxjs/add/operator/switchMap'; 

分析：

• 输入框输入数据可作为可观察对象（Observable），方便的是Observable中有fromEvent方法，可以通过事件创建Observable;
• 移除输入值的前后空白符，并且要求有效长度。第一步通过键盘事件创建了可观察对象，从观察对象中我们要拿到输入框中的值。接着进行两步操作，去除左右空格，过滤掉不满足长度要求的请求。第一步通过map实现，第二步通过filter实现；
• 防抖是提高代码效能的一个很有效方法，debounceTime可以帮助实现这一点。由于监听的是键盘事件，联想输入查询理论上发生在多次输入完成之后的某一个时间点发起，比如我们输入“最热门的电影”，拼音打字过程中可能出现的顺序是最  热门  的 电影，最字出现后不希望马上就产生联想输入，其实连贯的输入马上就能打出热门两字，当输入框中出现“最热门”的时候可以发出联想输入请求了，因此最字出现的时候能屏蔽请求的发出，debounceTime跟了一个duration，持续时间的参数，表示在这个duration之内如果不发生新的键盘事件那么订阅者就能收到输入框中的数据，否则可观察对象不会发出数据直到满足duration之内无心的键盘事件发生。比如设置duration为500毫秒，打出最字的500毫秒内又打出了热门两字，最字是不会发射给观察者的，如果500毫秒之后才输入“的”，那么“最热门”将会被发出，联想查询“最热门”；
• 如果输入值没发生变化，可不用发出新的请求，比如键盘回退之后又打出了回退前的值，那么可不用发出请求，因为很有可能之前已经发送了请求；
• 如果发出请求之后，在得到返回数据之前，又有新的输入请求发出，那么之前的请求实际上已经无效。switchMap可以做到这一点。

实际代码

const searchBox = document.getElementById('input-id');
    
    const typehead = Observable.fromEvent(searchBox, 'keyup')
    .map(
      (e: MouseEvent) => {
        return (e.target as HTMLInputElement).value.trim()
      }
    )
    .filter(
      (text) => text.length >2 
    )
    .debounceTime(2000)
    .distinctUntilChanged()
    .switchMap(()=>{
      return Observable.create(
        ()=>{
          setTimeout(()=>{console.log('getData from server')},2000)
        }
      )
    })

    const subscription = typehead.subscribe(
      () => {
        console.log('done');
      }
    )