寮傛璋冪敤灏卞儚姘寸锛岀瀛愯秺缂犵粫瓒婂鏄撴紡姘淬€傚浣曞阀濡欑殑杩炴帴姘寸锛岃鏁翠釜绯荤粺瓒冲鐏垫椿锛岄渶瑕佽鐪熸€濊€凁煠斿緢澶氫汉瀵笿avaScript寮傛鐨勭悊瑙ｄ竴鐩村緢鍥版儜锛欽s鏄崟绾跨▼鐨勶紝鎬庝箞瀹炵幇寮傛锛熷疄闄呬笂锛孞s寮曟搸鏄€氳繃娣峰悎涓ょ鍐呭瓨鏁版嵁缁撴瀯锛氭爤鍜岄槦鍒楁潵瀹炵幇鐨勩€傛爤鍜岄槦鍒楃殑浜や簰灏辨槸浼楁墍鍛ㄧ煡鐨凧s浜嬩欢寰幆~~涓句釜鏍楀瓙馃尠functionfooB(){console.log('fooB:called');}functionfooA(){fooB();console.log('fooA:called');}fooA();//->fooB:called//->fooA:called澶嶅埗浠ｇ爜Js寮曟搸瑙ｆ瀽濡備笅锛歱ushfooAtostack|fooA|<-pushpushfooB鍒板爢鏍?鍫嗘爤>|fooB|<-push|fooA|popfooB浠庢爤涓墽琛?stack>|fooB|<-pop|fooA|//->fooB:璋冪敤|fooA|浠庢爤涓脊鍑篺ooA骞舵墽琛?stack>|fooA|<-pop//->fooA:璋冪敤<鍫嗘爤>|鍑芥暟浼氳鏀惧叆闃熷垪鍚楋紵褰撶劧鏄寘鍚紓姝ユ搷浣滅殑鍑芥暟锛歴etTimeoutsetIntervalpromiseajaxDOM浜嬩欢涓句釜鏍楀瓙馃尠functionfooB(){setTimeout(()=>console.log('APIcallB'));console.log('fooB:called');}functionfooA(){setTimeout(()=>console.log('API璋冪敤A'));fooB();console.log('fooA:called');}fooA();//->fooB:called//->fooA:called//->API璋冪敤A//->API璋冪敤B鎷疯礉浠ｇ爜Js寮曟搸鍒嗘瀽濡備笅锛歱ushfooAtostack|fooA|<-pushpush'APIcallA'toqueue|'APIcallA'|<-pushpushfooB鍒板爢鏍?鍫嗘爤>|fooB|<-push|fooA|push'APIcallB'toqueue|'APIcallA'|'APIcallB'|<-浠庡爢鏍堜腑寮瑰嚭fooB骞舵墽琛?stack>|fooB|<-pop|fooA|//->fooB:璋冪敤|fooA|浠庢爤涓脊鍑篺ooA骞舵墽琛?stack>|fooA|<-pop//->fooA:called<-stackisempty||浠庨槦鍒椾腑寮瑰嚭鈥淎PI璋冪敤A鈥濆苟鎵ц<闃熷垪>|鈥淎PI璋冪敤A鈥潀<-pop|'APIcallB'|//->APIcallA|'APIcallB'|浠庨槦鍒椾腑寮瑰嚭'APIcallB'骞舵墽琛?queue>|'APIcallB'|<-pop//->API璋冪敤B||鐪嬬湅鎴戜滑鐩墠鏄浣曠粍缁囪繖绉嶄氦浜掔殑~鏄殑锛屼笅闈笁绉嶇粍缁囨柟寮忎篃鏄湰鏂囩殑鏍稿績閲嶇偣锛欳allbackPromiseObserverCallback=>Promise=>Observer锛屽悗涓€绉嶆槸鍦ㄥ墠涓€绉嶇殑鍩虹涓婃紨鍖栬€屾潵鐨剘濡備綍Callback鐞嗚ВCallback鍚楋紵浠ュ懠鍙鏈嶄负渚嬶紝鏈変袱绉嶉€夋嫨锛氭帓闃熺瓑寰呭鏈嶆帴鍚紱閫夋嫨瀹㈡湇鏈夌┖鏃剁粰鎮ㄥ洖鐢电浜屼釜閫夐」鏄疛avaScriptCallback鍥炶皟妯″紡銆傚湪绛夊緟瀹㈡湇鍥炲鐨勫悓鏃讹紝鍙互鍋氬叾浠栦簨鎯呫€備竴鏃﹀鏈嶆湁绌猴紝灏变細涓诲姩缁欎綘鍥炵數璇潂functionsuccess(res){console.log("API璋冪敤鎴愬姛");}functionfail(err){console.log("API璋冪敤澶辫触");}functioncallApiFoo(success,fail){fetch(url).then(res=>success(res)).catch(err=>fail(err));};callApiFoo(success,fail);澶嶅埗浠ｇ爜鍥炶皟缂虹偣锛氬祵濂楄皟鐢ㄤ細褰㈡垚鍥炶皟鍦扮嫳锛屽涓嬶紱callApiFooA((resA)=>{callApiFooB((resB)=>{callApiFooC((resC)=>{console.log(resC);}),澶辫触锛?}),澶辫触锛?}),澶辫触锛?澶嶅埗浠ｇ爜Promise浼楁墍鍛ㄧ煡锛孭romise鏄负浜嗚В鍐冲洖璋冨湴鐙眫functioncallApiFooA(){returnfetch(url);//JSfetch鏂规硶杩斿洖涓€涓狿romise}functioncallApiFooB(resA){returnfetch(url+'/'+resA.id);}functioncallApiFooC(resB){returnfetch(url+'/'+resB.id);}callApiFooA().then(callApiFooB).then(callApiFooC).catch(fail)鍚屾椂锛孭romise涔熸彁渚涗簡寰堝鍏朵粬鏇村叿鎵╁睍鎬х殑瑙ｅ喅鏂规锛屼緥濡侾romise.all銆丳romise.race绛夛紱//Promise.all锛氬苟鍙戞墽琛岋紝鍙湁褰揳ll鍙樹负resolve鎴栧嚭鐜皉eject鐘舵€佹椂鎵嶄細璋冪敤.then鏂规硶锛涘嚱鏁癱allApiFooA(){杩斿洖鑾峰彇(urlA);}鍔熻兘ncallApiFooB(){杩斿洖鑾峰彇(urlB);}functioncallApiFooC([resA,resB]){returnfetch(url+'/'+resA.id+'/'+resB.id);}functioncallApiFooD(resC){returnfetch(url+'/'+resC.id);}Promise.all([callApiFooA(),callApiFooB()]).then(callApiFooC).then(callApiFooD).catch(fail)澶嶅埗Promise鐨勪唬鐮侊紝璁╀唬鐮佺湅璧锋潵鏇寸畝鍗曪紝浣嗘槸杩涘寲杩樻病鏈夌粨鏉燂紱濡傛灉瑕佸鐞嗗鏉傜殑鏁版嵁娴侊紝浣跨敤Promise浼氬緢楹荤儲鈥︹€bserver澶勭悊澶氫釜寮傛鎿嶄綔鐨勬暟鎹祦鏄潪甯稿鏉傜殑锛屽挨鍏舵槸褰撳畠浠浉浜掍緷璧栨椂锛屾垜浠繀椤讳互鏇村阀濡欑殑鏂瑰紡灏嗗畠浠粍鍚堣捣鏉ワ紱瑙傚療鑰呮潵浜嗭紒瑙傚療鑰呭垱寤猴紙鍙戝竷锛夎鏀瑰彉鐨勬暟鎹祦锛岃闃呰皟鐢紙璁㈤槄娑堣垂锛夋暟鎹祦锛涗互RxJs涓轰緥锛歠unctioncallApiFooA(){returnfetch(urlA);}鍑芥暟璋冪敤ApiFooB(){杩斿洖鑾峰彇(urlB);}functioncallApiFooC([resAId,resBId]){returnfetch(url+'/'+resAId+'/'+resBId);}functioncallApiFooD(resC){returnfetch(url+'/'+resC.id);}鍙瀵熴€俧rom(Promise.all([callApiFooA(),callApiFooB()])).pipe(map(([resA,resB])=>([resA.id,resB.id])),//<-鎻愬彇idsswitchMap((resIds)=>Observable.from(callApiFooC(resIds))),switchMap((resC)=>Observable.from(callApiFooD(resC))),鐐瑰嚮((resD)=>console.log(resD))).subscribe();澶嶅埗浠ｇ爜璇︾粏杩囩▼锛歄bservable.from鏍规嵁callApiFooA鍜宑allApiFooB鐨剅esult鏁扮粍灏嗕竴涓狿romises鏁扮粍杞负Observable锛沵ap鈥斾粠API鍑芥暟A鍜孊鐨勫搷搴斾腑鎻愬彇ID锛泂witchMap鈥旂敤涔嬪墠缁撴灉鐨刬d璋冪敤callApiFooC锛岃繑鍥炰竴涓柊鐨凮bservable锛岃繖涓柊鐨凮bservable灏辨槸callApiFooC(resIds)鐨勮繑鍥炵粨鏋滐紱switchMap鈥斾娇鐢ㄥ嚱鏁癱allApiFooC鐨勭粨鏋滆皟鐢╟allApiFooD锛泃ap-鑾峰彇涓婁竴娆℃墽琛岀殑缁撴灉锛屽苟鎵撳嵃鍦ㄦ帶鍒跺彴锛涜闃?寮€濮嬫敹鍚琽bservable锛汷bservable鏄涓暟鎹€肩殑鐢熶骇鑰咃紝鍦ㄥ鐞嗗紓姝ユ暟鎹祦鏂归潰姣旇緝寮哄ぇ鍜岀伒娲伙紝鏄湪Angular绛夊墠绔鏋朵腑浣跨敤鐨剘~鏁诧紒杩欑鍐欐硶锛岃繖绉嶆ā寮忎笉灏辨槸鍑芥暟寮忕紪绋嬩腑鐨勪豢鍑芥暟鍚楋紵Observable鏄竴涓皝瑁呭ソ鐨勪豢鍑芥暟锛屼笉鏂紶閫掑舰鎴愰摼锛屾渶鍚庤皟鐢╯ubscribe鎵ц锛屼篃灏辨槸鎯版€ф眰鍊硷紝鍦ㄦ渶鍚庝竴姝ユ墽琛屾秷璐癸紒杩欐牱鍋氭湁浠€涔堝ソ澶勶紵鏍稿績鍘熷洜鏄负浜嗗垎绂诲垱寤猴紙鍙戝竷锛夊拰璋冪敤锛堣闃呮秷璐癸級锛佸彟涓€涓緥瀛愷煂皏arobservable=Rx.Observable.create(function(observer){observer.next(1);observer.next(2);observer.next(3);setTimeout(()=>{observer.next(4);observer.complete();},1000);});console.log('灏卞湪璁㈤槄涔嬪墠');observable.subscribe({next:x=>console.log('gotvalue'+x),error:err=>console.error('鍙戠敓閿欒锛?+err)锛屽畬鎴愶細()=>console.log('瀹屾垚'),});console.log('璁㈤槄鍚?);澶嶅埗浠ｇ爜observable鍙戝竷锛堝悓姝ワ級1銆?銆?涓変釜鍊硷紱1绉掑悗锛岀户缁彂甯?涓繖涓€硷紝鍒版渶鍚庣粨鏉燂紱璁㈤槄璁㈤槄锛岃皟鐢ㄦ墽琛岋紱subscription.unsubscribe()鍙互鍦ㄨ繃绋嬩腑鏆傚仠鎵ц锛沜onsoleprintresults:justbeforesubscribegotvalue1gotvalue2gotvalue3justaftersubscribegotvalue4done鍒嗕负3涓樁娈碉細Callback=>Promise=>Observer锛岄噸鐐圭悊瑙ｆ槸Observer锛孫bserver灏卞儚涓€涓嚱鏁板紡缂栫▼鐨勫嚱瀛愶紝灏佽锛屼紶閫掗摼锛屽欢杩熸墽琛岋紝鍑犱箮涓€妯′竴鏍凤紝鍙槸寮鸿皟浜嗗彂甯冨拰璁㈤槄鐨勬€濇兂锛佸皢鍑芥暟鐨勫垱寤哄拰鎵ц鍒嗘垚涓や釜鐙珛鐨勫煙瀵逛簬寮规€х粍瑁呭紓姝ョ閬撹嚦鍏抽噸瑕侊紒锛佹渶鍚庯紝濡傛灉鎮ㄨ寰楁湰鏂囧鎮ㄦ湁甯姪锛岃鐐硅禐鎴栧姞鍏ユ垜鐨勫紑鍙戜氦娴佺兢锛?025263163浜掔浉瀛︿範锛屾垜浠細鏈変笓涓氱殑鎶€鏈В绛斻€傚鏋滄偍瑙夊緱杩欑瘒鏂囩珷瀵规偍鏈夌敤锛岃涓嶅悵璧愭暀銆傝缁欐垜浠殑寮€婧愰」鐩竴涓皬鏄熸槦锛歨ttps://gitee.com/ZhongBangKe...闈炲父鎰熻阿锛?/p>
