RxJS鐨勭畻瀛愮湡鐨勫ソ闅炬噦銆傛瘮濡傛渶甯哥敤鐨勫湴鍥剧畻瀛愶紝鏈枃灏卞姫鍔涙墦閫氬畠浠紒锛佸師鍒涙枃绔狅紝闈炲晢涓氳浆杞斤紝杞浇璇峰憡鐭ュ悕绉板浘鎿嶄綔澶у涓€瀹氫笉闄岀敓锛歝onst{of}=Rx;const{map}=RxOperators;constnamesObservable=of('A','B');namesObservable.pipe(map(name=>`map${name}`))namesObservable.subscribe(result=>console.log(`${result}`))//mapA//mapB寰堢洿瑙傦紝鍥犱负map鏄犲皠鐨勬槸鈥淰alue鈥濓紝鎵€浠ュ緢绠€鍗晘浣嗘槸锛屽鏋渕apmapsobservable鍛紵const{of}=Rx;const{map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returnof(`${name}1`,`${name}2`);}namesObservable.pipe(map(name=>http(name)))namesObservable.subscribe(result=>console.log(`${result}`))//浼氬緱鍒颁袱涓猳bservableObject//****observable{..}//observable{..}鎴戜滑鍦╗](https://rxviz.com/)https://rxviz.com/鐨勫脊鐝犲浘涓彲浠ユ竻妤氱殑鐪嬪埌锛歳eturn浠嶇劧鏄痮bservable骞朵笖observable鐨勪釜鏁颁粠鍘熸潵鐨勪竴涓彉鎴愪簡涓や釜锛堝渾鍦堝氨鏄偅涓猳bservable锛夛紝鏁版嵁杩樺湪閲岄潰锛屾病鏈夎璁㈤槄鍜岃В鏋愩€傝櫧鐒讹紝鎴戜滑鍙互鐢ㄤ竴涓矖鐣ョ殑鏂规硶鍦╯ubscribe.subscribe涓啀娆¤皟鐢╯ubscribe.subscribe锛岀劧鍚庢垜浠彲浠ュ緱鍒板€硷細const{of}=Rx;const{map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returnof(`${name}1`,`${name}2`);}namesObservable.pipe(map(鍚嶇О=>http(鍚嶇О)))鍚嶇О鍙瀵熴€俿ubscribe(resultObservable=>{resultObservable.subscribe(result=>console.log(`${result}`))})//A1//A2//B1//B2鐒惰€岋紝杩欑鍖呰９鏂瑰紡娉ㄥ畾鏄笉浼橀泤鐨勶紝鎵€浠ワ紝涓轰簡瑙ｅ喅杩欎釜宸紓锛孯xJS寮曞叆浜嗏€斺€擣lattening锛堟墎骞冲寲锛夌瓥鐣ワ紒锛佹垜浠彲浠ヤ娇鐢╢latMap绠楀瓙鏉ヨ揪鍒板悓鏍风殑瑙ｆ瀽鍊肩殑鏁堟灉~flatMap鍏跺疄灏辨槸澶у鐔熺煡鐨刴ergeMap绠楀瓙锛涗唬鐮佸涓嬶細const{of}=Rx;const{mergeMap}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returnof(`${name}1`,`${name}2`);}namesObservable.pipe(mergeMap(name=>http(name)))namesObservable.subscribe(result=>console.log(`${result}`))//A1//A2//B1//B2鏇磋繘涓€姝ワ紝閬靛惊杩欑鎵佸钩鍖栫瓥鐣ワ紝闄や簡mergeMap锛孯xJS寮曞叆浜唖witchMap銆乧oncatMap鍜宔xhaustMap锛屽彲浠ユ彁渚涗笉鍚屾柟鍚戠殑鎵佸钩鍖栫瓥鐣ャ€傛垜浠敤[](https://rxviz.com/)https://rxviz.com/鐨勫脊鐝犲浘涓€鐩簡鐒讹細璁剧疆涓€涓畾鏃跺櫒锛屾瘡绉掑彂鍑轰竴涓猳bservable锛屽叡3娆★紝璁╂垜浠湅鐪嬪悇鑷殑浠峰€硷紱mergeMapconst{of,interval}=Rx;const{mergeMap,take,map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returninterval(1000).pipe(take(3),map(()=>of(`${name}1`,`${name}2`)))}namesObservable.pipe(mergeMap(name=>http(name)))mergeMap鍚屾椂缁存姢澶氫釜娲昏穬鐨勫唴閮ㄨ闃咃紱switchMapconst{of,interval}=Rx;const{switchMap,take,map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returninterval(1000).pipe(take(3),map(()=>of(`${name}1`,`${name}2`)))}namesObservable.pipe(switchMap(name=>http(name)))switchMap锛屾瘡娆″彂鍑洪兘浼氬彇娑堜箣鍓嶅唴閮╫bservable鐨勮闃咃紝鍐嶈闃呬竴涓柊鐨勫彲瑙傚療瀵硅薄锛沜oncatMapconst{of,interval}=Rx;const{concatMap,take,map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returninterval(1000).pipe(take(3),map(()=>of(`${name}1`,`${name}2`))}namesObservable.pipe(concatMap(name=>http(name)))concatMap浼氬湪涓婁竴涓唴閮╫bservable瀹屾垚鍚庤闃呬笅涓€涓紱exhaustMapconst{of,interval}=Rx;const{exhaustMap,take,map}=RxOperators;constnamesObservable=of('A','B');consthttp=(name)=>{returninterval(1000).pipe(take(3),map(()=>of(`${name}1`,`${name}2`)))}namesObservable.pipe(exhaustMap(name=>http(name)))exhaustMap鏄犲皠鍒颁竴涓唴閮╫bservable锛屽拷鐣ュ叾浠栧€硷紝鐩村埌observable瀹屾垚锛汷K锛屼互涓婂氨鏄湰鏂囩殑鍒嗕韩銆傛垜瑙夊緱寰堝ソ銆傜粰鎴戠偣涓禐馃憤馃憤馃憤锛屼綘鐨勯紦鍔憋紝鎴戠殑鍔ㄥ姏锛屽潥鎸佽緭鍑轰紭璐ㄦ枃绔爚~娆㈣繋璇勮璁ㄨ銆傛垜鏄帢閲戝畨涓滃凹锛岃緭鍑烘毚闇茶緭鍏ワ紝鎶€鏈礊瀵熶汉鐢熴€傚啀瑙亊~馃憢馃憢馃憢
