可以使用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事件還是網絡請求，都可以被抽象成按時間序列發生的事件

總結

以上是生活随笔為你收集整理的RxJs试炼的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。