Rxjs 基礎(1)
簡單定義是可以將 Rxjs 理解為非同步的 loDash
現在 web 的 5 個特徵
- AJAX
- 使用者事件(單擊、 滑鼠移動、鍵盤事件等)
- 動畫
- sockets
- workers(任務/作業)
回撥
通常 javascript 會採用回撥的方式來處理非同步
getSomeData((data)=>{ console.log('接受資料',data); });
回撥問題顧名思義,是我們所謂 callback Hell 也有叫做金子塔什麼來的。就是層層巢狀看起來不舒服,當然不僅僅是這些。
Promise 的出現可以讓程式碼顯得更清晰易懂
getSomeData(id) .then(data)=>{ console.log('接受資料',data); return getSomeData(data.parentId); }) .then( data => { doStuff(data); return getSomeData(data.parentId); });
Promises 的特性
- 不可取消
- 不可變(immutable)
- 一次性返回(單值)
- 快取
promise 的有些特性也是 promise 的缺點和問題所在,列出一下兩個問題
1. Promise 無法取消
我們經常線上看一些視訊,當我們找到一個想看的視訊然後開啟這個視訊,這時候就發起了一個 Promise 的請求,但是隨後我們又發現一個更適合我們的視訊,隨後我們就打開了新的視訊以收看,這時候就又發起一個 promise,由於 promise 是無法取消的所有前一個 promise 還在進行,這樣無形中就佔用了我們的網路資源。
我們需要一個型別是一個可以取消的非同步
Promises 只能一次性返回單值
- AJAX (適合單值)
- 使用者事件(單擊、 滑鼠移動、鍵盤事件等)
-
動畫
需要時時更新動畫的狀態 - sockets
- workers(作業/任務)
我們需要的型別是可以非同步返回一個 iterable
Iterable
- iterable.iterator() 獲取 iterator
-
iterator.next() 獲取結果
- result.value(): 返回值
- result.done 是否完成
- 在呼叫 iterator.next() 時可能會丟擲一個錯誤
const iterator = iterable.iterator(); while(true){ try { let result = iterator.next(); } catch (error) { handleError(err) } if(result.done){ break; } doSomething(result.value) }