鐮佸啘鎵嬭 | Rxjs 鍝嶅簲寮忕紪绋嬪簱

Posted 2021-04-30 鏋侀摼绉戞妧

鏍忕洰馃摪锛?span>鐮佸啘鎵嬭 馃捇

鎾版枃鉁嶐煆伙細Video++鏋侀摼绉戞妧鍓嶇Team杩滃崜

鏁寸悊馃摎锛氭灉鏋?/span>

鍏抽敭璇?/span>馃搶锛?/span> RESTRxjs 銆?/span> Rxjs vs Promise 銆?/span>  switchMap 

鉁嶏笍

 鐮佸啘鎵嬭 

灏嗕細閭€璇?/span>

涓€鐩村湪骞曞悗

鐢ㄤ唬鐮佸拰绠楁硶鏀瑰彉涓栫晫鐨?/span>

鎶€鏈ぇ浣滑

灏嗕細涓嶅畾鏈熸帹閫佷粬浠?/span>

鎵€鍐欑殑鍦ㄦ妧鏈笓涓氫腑鐨?/strong>

鎶€鏈粡楠?鐮旂┒/璁烘枃

涓轰綘鍛堢幇

/ 鏇村墠娌跨殑鎶€鏈€濊€?/

 / 鏇翠笓涓氱殑鎶€鏈共璐?/

#鐮佸啘鎵嬭# 绗?7鏈?/span>

鏂?nbsp;| @Video++鏋侀摼绉戞妧鍓嶇Team杩滃崜

RxJS鏄娇鐢∣bservables 鐨勫搷搴斿紡缂栫▼鐨勫簱锛屽畠浣跨紪鍐欏紓姝ユ垨鍩轰簬鍥炶皟鐨勪唬鐮佹洿瀹规槗銆?/span>闅忕潃娣卞叆浣犱細鍙戠幇瀹冮噰鐢ㄤ簡璁㈤槄鑰呮ā寮忥紝鍏朵腑涔熷甫鏈夌函鍑芥暟鐨勬€濇兂锛屾瘮濡俁xjs5涓垜浠妸鈥滃壇浣滅敤鈥濋兘鍐欏湪.do()涓€傜洿鍒板湪浣跨敤浜哛xJS 6涔嬪悗鎵嶄簡瑙ｅ叾灏戞湁浜烘剰璇嗗埌鐨勫彟涓€闈⑩€斺€旀祦銆?/span>

 

浠€涔堟槸娴侊紵node涓殑stream,gulp涓殑绠￠亾娴?.. 杩欓噷鎴戜滑涓嶇敤涓撲笟鏈鏉ヨВ閲婏紝鐢ㄧ敓娲讳腑澶у鐔熸倝鐨勭殑渚嬪瓙鏉ョ被姣旓紝姣斿鈥滄渤娴佲€濄€?/strong>

 

娌虫祦鏈変粈涔堢壒鐐癸紵鑷冲皯鏈変袱涓壒鐐癸細姘村線浣庡娴侊紝娌虫祦铏界劧鍙兘浼氳溈铚掔洏鏃嬶紝浣嗘槸鏈濆悜鍥哄畾锛屾瘮濡傛垜鍥界殑闀挎睙鍜岄粍娌冲氨閮芥槸鐢辫タ鍚戜笢娴併€?span>鍦≧xJS涓暟鎹殑娴佸悜涔熸槸鍥哄畾鐨勶紝灏辨槸浠庡彂閫佽€呭埌璁㈤槄鑰?/strong>銆傚熀鏈兘濡備笅闈㈣繖绉嶅舰寮忥細

 

娌抽亾鏈夋棤鏁扮殑鍒嗘敮涔熸湁鏃犳暟鐨勫悎骞讹紝鍦≧xjs涓殑鏄紝閫氳繃涓嶅悓鐨勬搷浣滅灏嗘暟鎹祦鎷嗗垎澶勭悊鑱氬悎鍙堟媶鍒嗐€俁xJS 6 鐩稿浜?RxJS 5锛堣繖閲屾寚5.5浠ヤ笅鐨勭増鏈紝鍥犱负pipe鍑芥暟鍦≧xJS 5.5涓綔涓烘柊鐗规€у凡琚紩鍏ワ級 鏉ヨ涓嶄粎淇敼浜嗕竴閮ㄥ垎鎿嶄綔绗︾殑鍚嶇О锛屽悓鏃跺仛浜嗕竴涓緝澶х殑鏀瑰姩锛屽紩鍏ヤ簡绠￠亾锛坧ipe锛夈€?/span>

 

杩欑鍐欐硶涓婄殑鍙樺寲灏卞甫鏉ヤ簡鐢ㄦ硶涓婄殑鍙樺寲锛屼互鍓嶇殑鍥哄畾鈥滄渤娴佲€濆彲浠ラ€氳繃鈥滅閬撯€濓紙pipe锛夋潵鎺у埗褰㈡垚鐏垫椿鐨勨€滄按娴佲€濄€?/span>

 

 

Rxjs 鍜屼紶缁熺殑Promise鍦ㄥ鐞嗗紓姝ラ棶棰樹笂鏈変粈涔堝樊璺濆憿锛熷啀浠ｇ爜灞傞潰浠€涔堟槸Rxjs璇村埌搴曟槸瑕佺悊瑙ｄ粈涔堟槸Observable銆?span>RXJS鏄疧bservable鐨凧avascript瀹炵幇銆?/span>

 

promise鐩歌緝浜嶳xjs鑰岃█鍔熻兘鏇村崟涓€ promise 鍙兘灏嗕竴涓暟鎹殑鐘舵€佺敱pending杞崲鎴恟esoloved鎴栬€卹ejected銆傝€孯xjs鍙互澶勭悊澶氫釜鏁版嵁瀵瑰簲complete鍜宔rror鐘舵€佷絾鏄疪xjs鍚屾椂鍙堟嫢鏈塶ext鏂规硶銆侽bservable鏄儼鎬х殑锛岄渶瑕乻ubscribe鐨勬椂鍊欐墠杈撳嚭鍊笺€俻romise鍐呴儴鐘舵€佹槸涓嶅彲鎺у埗鐨勶紝鎵ц浜嗗氨鏃犳硶缁堟銆備絾Observable鍙互瀹氫箟濡備綍鍙栨秷寮傛鏂规硶銆傝繖涔熷氨鏄垜涓嬮潰浼氳璁哄埌鐨勪竴涓紓姝ュ満鏅€?/span>

 

杈?/span>鍏ユ涓緭鍏ュ瓧绗︼紝鎸夊洖杞﹀彂閫佷竴涓姹傦紝骞跺皢杩斿洖鐨勭粨鏋滃彉鎴愪竴涓猼odo item銆傚鏋滃湪璇锋眰杩斿洖缁撴灉鍓嶅張涓€娆℃寜涓嬪洖杞︽垨add鎸夐挳锛屽鏋滅浉鍚屽垯涓嶈繘琛屼换浣曟搷浣滐紝濡傛灉涓嶅悓鍒欏彇娑堟帀涓婃鐨勮姹傚苟鍙戦€佹柊鐨勮姹傘€傦紙瀹為檯鐨勫満鏅線寰€鏄彂閫佷釜http璇锋眰璇ヨ姹備細杩斿洖鐨勫緢鎱紝涓氬姟涓婂姞涓婂績璺虫鏌ワ紝濡傛灉鍓嶄竴娆″湪蹇冭烦闂撮殧鍐呮棤杩斿洖鍒欏啀娆¤皟鐢ㄨ姹傦紝鍚屾椂闇€瑕佹姏寮冨墠涓€娆¤姹傜殑杩斿洖锛屽苟涓旀鏃舵湁鍙兘璋冪敤鍙傛暟涓嶄竴鏍风殑璇ユ帴鍙ｄ粠鑰岄€犳垚鏁版嵁涓嶄竴鑷寸殑闂锛夊浜嶱romise瀹炵幇鎴戜滑涓嶅彧瑕佺淮鎶や竴涓畾鏃跺櫒timer 鍚屾椂杩樿缁存姢涓€涓叏灞€鍙橀噺銆?/span>

 

鑰孯xjs 鎴戜滑鍙互閫氳繃switchMap 鍒囨崲 Observable杈惧埌璇ユ晥鏋溿€?/strong>

 

switchMap鍜屽叾浠栨墦骞虫搷浣滅鐨勪富瑕佸尯鍒槸瀹冨叿鏈夊彇娑堟晥鏋?/span>銆傚湪姣忔鍙戝嚭鏃讹紝浼氬彇娑堝墠涓€涓唴閮?observable (浣犳墍鎻愪緵鍑芥暟鐨勭粨鏋? 鐨勮闃咃紝鐒跺悗璁㈤槄涓€涓柊鐨?observable銆備綘鍙互閫氳繃鐭鍒囨崲鎴愪竴涓柊鐨?observable鏉ヨ蹇嗗畠銆?/span>

 

瀹冭兘鍦ㄥ儚 typeaheads(澶嶅埗閾炬帴鑷虫祻瑙堝櫒鎵撳紑馃憠馃徎http://t.cn/EiWBlm7) 杩欐牱鐨勫満鏅笅瀹岀編浣跨敤锛屽綋鏈夋柊鐨勮緭鍏ユ椂渚夸笉鍐嶅叧蹇冧箣鍓嶈姹傜殑鍝嶅簲缁撴灉銆傚湪鍐呴儴observable闀挎湡瀛樻椿鍙兘浼氬鑷村唴瀛樻硠闇茬殑鎯呭喌涓嬶紝杩欎篃鏄竴绉嶅畨鍏ㄧ殑閫夋嫨锛屼緥濡傦紝濡傛灉浣犱娇鐢?/span>mergeMap(http://t.cn/EiWrced)鍜宨nterval锛屽苟蹇樿姝ｇ‘澶勭悊鍐呴儴璁㈤槄銆傝浣忥紝switchMap 鍚屼竴鏃堕棿鍙淮鎶や竴涓唴閮ㄨ闃?/strong>锛屽湪绀轰緥1(http://t.cn/EiWre86)涓彲浠ユ竻妤氬嚭鐪嬪埌杩欎竴鐐广€?/span>

 

涓嶈繃瑕佸皬蹇冿紝鍦ㄦ瘡涓姹傞兘闇€瑕佸畬鎴愮殑鎯呭喌涓嬶紝鑰冭檻鍐欐暟鎹簱锛屼綘鍙兘瑕侀伩鍏嶄娇鐢?switchMap銆傚鏋滄簮observable鍙戝嚭閫熷害瓒冲蹇殑璇濓紝switchMap鍙互鍙栨秷璇锋眰銆傚湪杩欎簺鍦烘櫙涓紝mergeMap(http://t.cn/EiWrced)鏄纭殑閫夋嫨銆?/span>

 

杩欓噷鐨剆witchMap鍏跺疄鏄痬ap and switch锛岃€宻witch鎿嶄綔绗︾殑琛屼负鏄細

 

濡傛灉Observable涓祦鍔ㄧ殑鏁版嵁涔熸槸Observable锛宻witch浼氬皢鏁版嵁娴佷腑鏈€鏂扮殑涓€涓?Observable璁㈤槄骞跺皢瀹冪殑鍊间紶閫掔粰涓嬩竴涓搷浣滅锛岀劧鍚庡彇娑堣闃呬箣鍓嶇殑 Observable銆?/span>

 

绠€鐩村氨鏄负蹇冭烦妫€鏌ラ噺韬畾鍋氥€?span>涓嶇浣犲紓姝ョ殑鐘舵€佹槸鎬庝箞鏍穝witchMap涓殑Observable鍙闃呮渶鏂扮殑涓€涓?/strong>銆備笅闈㈡湁涓緥瀛愬彲浠ュ府浣犲緢娓呮櫚鐨勭悊瑙ｏ細

1.鍐欎竴涓熀浜?websocket 鐨勫湪绾胯亰澶╁锛屾瘡娆ebsocket鏀跺埌鏂版秷鎭紝涓嶅彲鑳介兘绔嬪埢娓叉煋鍑烘潵锛屽鏋滄槸鐢ㄤ簬鐢熶骇锛屽悓鏃朵細鏈夊緢澶氫汉璇磋瘽wx娓叉煋寰堝ぇ绋嬪害浼氭湁鎬ц兘闂銆傜敤JS鍐欑殑璇濓紝浣犻渶瑕佺淮鎶や竴涓暟缁勶紝鍜屼竴涓猼imer锛屾敹鍒版秷鎭紝鍏堟斁杩涙暟缁勶紝鐒跺悗timer璐熻矗鎶婃秷鎭覆鏌撳嚭鏉ワ紝鍚屾椂杩樿鑰冭檻娓呯悊timer锛岀被浼硷細

 

鑰屽湪Rxjs涓€氳繃鎿嶄綔绗ufferTime灏卞彲浠ュ噺灏戠淮鎶imer鐨勬垚鏈細

 

2. 姣斿鎴戜滑闇€瑕佺洃鍚〉闈㈡粴鍔ㄧ殑浜嬩欢锛屼綔鍑轰竴浜涢€昏緫鎿嶄綔锛岃繖鏄氨浼氫骇鐢熶簨浠惰繃浜庨绻佺殑璋冪敤锛岄€犳垚椤甸潰鍗￠】鐨勭幇璞°€傜敤鍘熺敓js瀹炵幇鐨勬椂鍊欙紝闇€瑕佸疄鐜颁釜鑺傛祦鎴栬€呴槻鎶栧嚱鏁帮紝閫氳繃瀹炵幇涓棴鍖呭嚱鏁帮紝鍦ㄥ唴閮ㄧ淮鎶や釜瀹氭椂鍣ㄣ€?span>鑰屽湪Rxjs涓€氳繃鎿嶄綔绗ebounce 灏卞彲浠ユ柟渚跨殑瑙ｅ喅銆?/strong>

 

鍙傝€冩枃鐚細

https://www.zhihu.com/topic/20036245/top-answers

https://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/switchmap.html

https://cn.rx.js.org/class/es6/Observable.js~Observable.html

 

馃殌

Video++鏋侀摼绉戞妧闆嗗洟

浠ヨ棰慉I鎶€鏈负鏍稿績

閫氳繃瀵瑰叏缃?15涓嘇PP涓殑

瑙嗛杩涜鍦烘櫙瑙ｆ瀽

椹卞姩鍦烘櫙鏂扮粡娴庣殑鍙戝睍

鏋勫缓浜嗗畬鏁寸殑瑙嗛鍦烘櫙浜т笟闂幆

鍦ˋI+瑙嗛琛屼笟宸插疄鐜板ぇ鎵归噺鍟嗙敤

馃憞馃徎 鍟嗕笟鍚堜綔璇风偣鍑婚槄璇诲師鏂囦簡瑙ｈ鎯?馃幀