RxJs试炼

可以使用https://stackblitz.com进行在线代码编写

1.数组的RxJs使用

• 直接输出数组

  const array = ['2',3,4,'5','a','aa','c','dd','Jack'];
  const result = array;
  console.log(result);
  // 控制台会直接输出 ["2", 3, 4, "5", "a", "aa", "c", "dd", "Jack"]
  

• 使用RxJs每隔500毫秒输出一个数组值

  const array = ['2',3,4,'5','a','aa','c','dd','Jack'];
  const source = interval(500).pipe(
    take(array.length),
    map(i=>array[i])
  );
  source.subscribe(v=>console.log(v))
  // 控制台会每隔500毫秒输出一个数组值
  

2.RxJs中对Dom事件的处理

• 使用Js的方式实现点击页面按钮间隔一秒以上才输出事件

  • html

    <button id="btn">Click me</button>
    

  • ts

    import { interval } from 'rxjs'; 
    import { map, take } from 'rxjs/operators';
    
    const btn = document.getElementById('btn');
    let preTime = new Date().getTime();
    btn.addEventListener('click', (event)=>{
      const nowTime = new Date().getTime();
      const silence = nowTime-preTime;
      if(silence>1000) {
        preTime = nowTime;
        console.log(event);
      }
    });
    

• 使用RxJs的方式实现间隔一秒以上才输出事件

  • html

    <button id="btn">Click me</button>
    

  • ts

    import { fromEvent } from 'rxjs'; 
    import { throttleTime } from 'rxjs/operators';
    
    const btn = document.getElementById('btn');
    const obs = fromEvent(btn, 'click').pipe(
      throttleTime(1000)//使用throttleTime操作符表示设置间隔的时间
    );
    obs.subscribe(v=>console.log(v));
    

3.使用语句声明的方式获取值

使用RxJs最大的好处是使得我们能够完全依赖于声明语句来获得动态的值

• 使用Js的方式获取变化后的变量值

  let a = 4;
  let b = a*10;
  console.log(b);//40
  a = 5;
  console.log(b);//40 说明b不会实时获取到a的值从而发生变化
  

• 使用RxJs的方式实时获取变化后的变量值

  import { interval } from 'rxjs'; 
  import { map } from 'rxjs/operators';
  
  const a = interval(1000).pipe(//每个1秒处理一次
    map(_=>Math.random().toFixed(1))
  );
  const b = a.pipe(
    map(item=>item*10)
  );
  b.subscribe((item)=>console.log(item));//此时b每个一秒都会输出随机值*10
  

4.使用RxJs处理网络请求

• 需求：每隔3秒发送一下请求，且每当用户点击按钮的时候也发送请求

• 分别将每个3秒的事件封装成流，将用户点击事件封装成流

• 通过merge操作符将流合并，并通过mergeMap上述事件流触发时要执行的内容

• 通过subscribe监听流并获得返回值

• 实例代码

  • html

    <button id="btn">Click me</button>
    

  • ts

    import { interval, fromEvent, from, merge } from 'rxjs'; 
    import { mergeMap } from 'rxjs/operators';
    
    const btn = document.getElementById('btn');
    const click = fromEvent(btn, 'click');
    const inner = interval(3000);
    const request = from(fetch('https://api.github.com/users').then(res=>res.json()));
    const response = merge(//用来合并事件,当任意一个事件触发时都会执行mergeMap操作
      click,
      inner
    ).pipe(
      mergeMap(_=>request)//当合并事件流触发时执行的操作
    );
    response.subscribe((res)=>console.log(res));//输出请求的结果内容
    // 每隔3秒发送一下请求，且每当用户点击按钮的时候也发送请求
    

5.试炼总结

• 响应式优点：使用声明语句来获取动态的值，语义化，状态隔离
• 响应式思维：Everything is observable; 无论是数组，DOM事件还是网络请求，都可以被抽象成按时间序列发生的事件