鐮佸啘鎵嬭 | Rxjs 鍝嶅簲寮忕紪绋嬪簱
Posted 鏋侀摼绉戞妧
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鐮佸啘鎵嬭 | Rxjs 鍝嶅簲寮忕紪绋嬪簱相关的知识,希望对你有一定的参考价值。
鏍忕洰馃摪锛?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涔嬪悗鎵嶄簡瑙e叾灏戞湁浜烘剰璇嗗埌鐨勫彟涓€闈⑩€斺€旀祦銆?/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鍦ㄥ鐞嗗紓姝ラ棶棰樹笂鏈変粈涔堝樊璺濆憿锛熷啀浠g爜灞傞潰浠€涔堟槸Rxjs璇村埌搴曟槸瑕佺悊瑙d粈涔堟槸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璇锋眰璇ヨ姹備細杩斿洖鐨勫緢鎱紝涓氬姟涓婂姞涓婂績璺虫鏌ワ紝濡傛灉鍓嶄竴娆″湪蹇冭烦闂撮殧鍐呮棤杩斿洖鍒欏啀娆¤皟鐢ㄨ姹傦紝鍚屾椂闇€瑕佹姏寮冨墠涓€娆¤姹傜殑杩斿洖锛屽苟涓旀鏃舵湁鍙兘璋冪敤鍙傛暟涓嶄竴鏍风殑璇ユ帴鍙d粠鑰岄€犳垚鏁版嵁涓嶄竴鑷寸殑闂锛夊浜嶱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锛屽苟蹇樿姝g‘澶勭悊鍐呴儴璁㈤槄銆傝浣忥紝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>銆備笅闈㈡湁涓緥瀛愬彲浠ュ府浣犲緢娓呮櫚鐨勭悊瑙o細
1.鍐欎竴涓熀浜?websocket 鐨勫湪绾胯亰澶╁锛屾瘡娆ebsocket鏀跺埌鏂版秷鎭紝涓嶅彲鑳介兘绔嬪埢娓叉煋鍑烘潵锛屽鏋滄槸鐢ㄤ簬鐢熶骇锛屽悓鏃朵細鏈夊緢澶氫汉璇磋瘽wx娓叉煋寰堝ぇ绋嬪害浼氭湁鎬ц兘闂銆傜敤JS鍐欑殑璇濓紝浣犻渶瑕佺淮鎶や竴涓暟缁勶紝鍜屼竴涓猼imer锛屾敹鍒版秷鎭紝鍏堟斁杩涙暟缁勶紝鐒跺悗timer璐熻矗鎶婃秷鎭覆鏌撳嚭鏉ワ紝鍚屾椂杩樿鑰冭檻娓呯悊timer锛岀被浼硷細
鑰屽湪Rxjs涓€氳繃鎿嶄綔绗ufferTime灏卞彲浠ュ噺灏戠淮鎶imer鐨勬垚鏈細
2. 姣斿鎴戜滑闇€瑕佺洃鍚〉闈㈡粴鍔ㄧ殑浜嬩欢锛屼綔鍑轰竴浜涢€昏緫鎿嶄綔锛岃繖鏄氨浼氫骇鐢熶簨浠惰繃浜庨绻佺殑璋冪敤锛岄€犳垚椤甸潰鍗¢】鐨勭幇璞°€傜敤鍘熺敓js瀹炵幇鐨勬椂鍊欙紝闇€瑕佸疄鐜颁釜鑺傛祦鎴栬€呴槻鎶栧嚱鏁帮紝閫氳繃瀹炵幇涓棴鍖呭嚱鏁帮紝鍦ㄥ唴閮ㄧ淮鎶や釜瀹氭椂鍣ㄣ€?span>鑰屽湪Rxjs涓€氳繃鎿嶄綔绗ebounce 灏卞彲浠ユ柟渚跨殑瑙e喅銆?/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涓殑
瑙嗛杩涜鍦烘櫙瑙f瀽
椹卞姩鍦烘櫙鏂扮粡娴庣殑鍙戝睍
鏋勫缓浜嗗畬鏁寸殑瑙嗛鍦烘櫙浜т笟闂幆
鍦ˋI+瑙嗛琛屼笟宸插疄鐜板ぇ鎵归噺鍟嗙敤
馃憞馃徎 鍟嗕笟鍚堜綔璇风偣鍑婚槄璇诲師鏂囦簡瑙h鎯?馃幀
以上是关于鐮佸啘鎵嬭 | Rxjs 鍝嶅簲寮忕紪绋嬪簱的主要内容,如果未能解决你的问题,请参考以下文章