当前位置: 首页 > Web前端 > HTML

javaScript进阶之路---《手写 Promise(前篇)》

时间:2023-03-29 12:26:56 HTML

鍓嶈█锛氭潵鐨勬鏄椂鍊欍€傚湪瀹屾垚浜嗘垜浠墠闈㈢殑鍥涗釜鍒嗘敮浠诲姟鍜孞S浠g爜杩愯鏈哄埗涔嬪悗锛屾垜浠氨鍙互鍔犳繁瀵瑰洖璋冨嚱鏁扮殑鐞嗚В浜嗐€傛墜鍐欑殑鈥滃洖璋冨湴鐙扁€濆畯浠诲姟鍜屽井浠诲姟缁堜簬鏉ヤ簡銆備富绾夸换鍔?--銆婃墜鍐?Promise銆嬨€傚浜庡墠绔潵璇达紝褰撲綘鍏呭垎鐞嗚В浜哖romise鐨勮璁℃€濇兂锛岄偅涔堜綘灏变細瀵逛箣鍓嶈璇嗙殑JS涓栫晫鏈変竴涓叏鏂扮殑璁よ瘑銆備笉鐭ラ亾澶у鏈夋病鏈夎繃杩欐牱鐨勬兂娉曪細鈥斺€斺€滄劅瑙夎嚜宸辩殑鐭ヨ瘑鍌ㄥ鐜板湪宸笉澶氫簡锛屾帴涓嬫潵瑕佹€庝箞鎻愰珮鍛紵鈥濅簨瀹炰笂锛屾病鏈変汉鑳藉憡璇変綘杩欎釜闂鐨勭‘鍒囩瓟妗堛€傚彧鏈夊綋浣犳帉鎻′簡浠ュ墠涓嶇煡閬撶殑鐭ヨ瘑鐐癸紝鍝竴澶╁畬鍏ㄩ鎮熶簡銆備綘鐨勮剳娴烽噷浼氱獊鐒舵湁涓€绉嶁€滅煡璇嗗崌鍗庘€濈殑鎰熻銆傦紙鎴戞棤娉曞噯纭弿杩伴偅绉嶆劅瑙夛紝浠夸經鎭嶇劧澶ф偀锛変箣鍓嶇殑鎵€鏈夌煡璇嗛兘浼氬湪鑴戞捣涓灛闂翠覆鑱旇捣鏉ワ紝姣忎釜鐭ヨ瘑鐐逛笉鍐嶆槸涓€涓釜纰庣墖馃З銆傝繖绉嶆劅瑙夋槸鏌愬ぉ鏄庣櫧JS鍥炶皟鍑芥暟鐪熸鎯宠〃杈句粈涔堬紝鎵嬪啓Promise鏃跺嚭鐜扮殑銆傚綋浣犳瘡澶╀竴娆℃湁杩欑鎰熻鐨勬椂鍊欙紝浣犲氨涓嶄細鍘婚棶鍒汉鎬庝箞杩涢樁浜嗭紝鍥犱负閭d釜鏃跺€欙紝浣犲叾瀹炲凡缁忓畬鎴愪簡褰撳墠鐭ヨ瘑鐨勮繘闃讹紝褰撲綘鍥炲ご鐪嬩唬鐮佺殑鏃跺€欙紝浣犱細鍙戠幇涓€涓笉涓€鏍风殑涓栫晫锛岃繖鏄湪浜戝眰鍚庣湅鍒板お闃崇殑鎰熻銆傗殸锔忔敞鎰忥細鏈枃鍐呭瑕佹眰浣犲鍥炶皟鍑芥暟鍜屽畯浠诲姟銆佸井浠诲姟鏈夋竻鏅扮殑璁よ瘑銆備笉澶簡瑙g殑灏忎紮浼达紝璇峰湪鐖哥埜濡堝鐨勯櫔浼翠笅浠旂粏瑙傜湅銆傚湪鎮ㄧ殑鐩綍鏂囦欢澶逛腑鍒涘缓涓€涓猰yPromise.ts鏂囦欢銆備笉鐔熸倝.ts鐨勬湅鍙嬩笉鐢ㄦ媴蹇冦€傝繖绡囨枃绔犱腑浣跨敤ts鐨勭浉鍏冲唴瀹瑰緢灏戙€?.瀹炵幇MyPromise绫荤殑鏋勯€犲嚱鏁伴鍏堬紝鎴戜滑瀹氫箟涓€涓被MyPromise銆備笅闈㈡垜灏辫窡鐫€鍘熺敓鐨凱romise涓€姝ユ鏉ュ府鍔╁ぇ瀹剁悊瑙romise鐨勫疄鐜版€濊矾銆傛濡傛垜浠湪涓婁竴绔犱腑浜嗚В鍒扮殑锛孭romise绫诲皢鎺ユ敹涓€涓悕涓篹xecutor鐨勫嚱鏁版潵鍒濆鍖栨垜浠殑Promise绫荤殑瀹炰緥銆俹k锛岃€屼笖鎴戜滑涔熷己璋冧簡executor鍙槸涓€涓櫘閫氱殑鍑芥暟銆傞偅涔堟垜浠彲浠ュ涓嬪湪MyPromise鐨勬瀯閫犲嚱鏁颁腑瀹氫箟涓€涓舰鍙傦紝鍑嗗鎺ユ敹鍒濆鍖栨椂浼犵粰鎴戜滑鐨勫疄鍙傘€傜浉淇¤仾鏄庣殑浣犻兘鑳界湅鍑烘潵锛屽綋鎴戜滑鐪熸鏂板缓涓€涓狿romise瀹炰緥鐨勬椂鍊欙紝浼犻€掔粰Promise绫荤殑鍑芥暟灏辨槸鎴戜滑鍒氭墠瀹氫箟鐨別xecutor鍑芥暟鐨勫疄鍙傘€傚ソ鐨勶紝璁╂垜浠户缁€傛垜浠繕鐭ラ亾鎵ц鍑芥暟灏嗕紶閫掍袱涓弬鏁般€傝繖涓や釜鍙傛暟鍒嗗埆鏄竴涓彨鍋歳esolve鍜宺eject鐨勫嚱鏁帮紒璇锋敞鎰忥紝瀹冧滑閮芥槸鍑芥暟锛侊紒鎵€浠ユ垜浠彲浠ュ儚涓嬮潰杩欐牱鍐欍€傚ソ鍍忔槸绾㈣壊鐨勶紵鏄殑锛屽洜涓哄湪MyPromise缁撴瀯涓紝杩欎袱涓嚱鏁拌繕涓嶅瓨鍦ㄣ€傞偅鎴戜滑璇ユ€庝箞鍔炲憿锛燄煠旓紝鏄笉鏄緢绠€鍗曪紵娌℃湁鐨勮瘽鎴戜滑鑷繁鏉ュ惂~鍙互鐪嬪埌鎴戜滑瀹氫箟浜嗕袱涓嚱鏁帮紝璨屼技寰堟祦琛?..杩欓噷闇€瑕佺敤this鍏抽敭瀛楀憡璇夋墽琛岃€呮垜瑕佷紶閫掔殑鏄被鐨勬柟娉曟湰韬€傛墍浠ユ纭殑鍋氭硶搴旇濡備笅銆傝嚦姝わ紝鎴戜滑鐨勬墽琛屽櫒鍑芥暟灏卞啓瀹屼簡銆?銆佸疄鐜皉esolve鍜宺eject鍑芥暟杩欓噷鎴戜滑鍏堝疄鐜皉esolve锛屼笉鐢ㄧ潃鎬ャ€傛垜浠厛鐪嬬湅鍘熺敓鐨凱romise鏄€庝箞浣跨敤鐨勩€傛垜浠彲浠ョ湅鍒皉esolve鍑芥暟鍙互浼犱竴涓弬鏁帮紝杩欐牱鎴戜滑鍙互鏇磋繘涓€姝ャ€傛垜浠厛鏉ユ楠屼竴涓嬫垜浠殑鎬濊矾鏄惁姝g‘銆傝鎴戜滑鍏堝垱寤轰竴涓柊瀹炰緥鏉ヤ繚瀛樻暟鎹€傚棷鈥︹€﹀ソ鍍忔湁鐐瑰儚銆傪煃﹀悓鏍凤紝reject鍑芥暟涔熸槸杩欐牱鍐欑殑銆傛鏃讹紝鎴戣涓烘偍鐨凪yPromise绫诲簲璇ュ涓嬫墍绀恒€?.瀹炵幇then鏂规硶銆傛垜浠洖鎯充竴涓嬶紝鍘熸潵鐨凱romise璇诲彇鏁版嵁鐨勬椂鍊欙紝鏄湪瀹炰緥鐨則hen鏂规硶涓婅鍙栫殑銆傝繖閲屾垜浠渶瑕佹彁渚涗竴涓彉閲忔潵鎺ユ敹resolve浼犺繃鏉ョ殑鍊笺€傚苟涓旈渶瑕佸湪MyPromise绫讳腑鎻愪緵涓€涓猼hen鏂规硶鏉ヨ鍙栦紶閫掕繃鏉ョ殑鏁版嵁銆傝鎴戜滑鍦ㄨ繖閲屾墦浣忥紝璁╂垜浠€冭檻涓€涓嬨€傛垜浠殑缁撴灉棰勮涓嶄細琚疄渚嬪紩鐢ㄣ€傝繖鎰忓懗鐫€浠€涔堬紵濡傛灉鎴戜滑鎸夌収涓婇潰鐨勬柟娉曪紝灏变細鍑虹幇杩欐牱鐨勯敊璇€傚疄渚嬪彲浠ョ洿鎺ュ紩鐢ㄨ繖涓粨鏋滐紝杩欐槸鎴戜滑涓嶆兂鐪嬪埌鐨勩€傝繖閲岄渶瑕佺敤鍒扮殑鐭ヨ瘑鏄細濡傛灉鎴戜滑涓嶆兂璁╁疄渚嬭皟鐢ㄦ煇涓睘鎬э紝鏂规硶涔熷緢绠€鍗曪紝鍦ㄥ墠闈㈠姞涓€涓?鍙峰嵆鍙€傛帴涓嬫潵鏄湰鏂囩殑绗竴涓噸鐐广€傞偅涔坱hen鍑芥暟搴旇鎬庝箞璁捐鍛紵鎴戜滑鍏堢湅鐪嬪師鐢烶romise瀹炰緥涓婄殑.then鏂规硶鏄浣曚娇鐢ㄧ殑銆傜敱鍓嶉潰鐨勭煡璇嗘垜浠彲浠ョ煡閬搕hen鏂规硶涔熸帴鍙椾袱涓洖璋冨嚱鏁颁綔涓哄弬鏁般€傚苟涓旂涓€涓洖璋冨嚱鏁扮殑鍙傛暟灏嗕紶閫抮esolve淇濆瓨鐨勫€硷紝绗簩涓洖璋冨嚱鏁扮殑鍙傛暟灏嗕紶閫抮eject淇濆瓨鐨勫€笺€俹k锛岄偅鎴戜滑涔熷埆鎯冲お澶氾紝缁檛hen鍑芥暟浼犻€掍袱涓弬鏁板氨琛屼簡锛岃繖涓や釜鍙傛暟涔熸槸涓や釜鍑芥暟銆備綔涓虹涓€涓弬鏁帮紝鎴戜滑鍒涘缓浜嗕竴涓悕涓簅nFulfilled鐨勫嚱鏁帮紝瀹冨搴斾簬resolve淇濆瓨鐨勫€笺€傛垜浠皟鐢ㄧ浜屼釜鍙傛暟onRejected锛屽畠搴旇涔熸槸涓€涓嚱鏁般€傛墍浠ユ垜浠彲浠ヨˉ鍏卼hen鍑芥暟鐨勫唴瀹癸紝灏嗘垜浠€氳繃reject淇濆瓨鐨勭粨鏋滀紶閫掔粰then鍑芥暟銆備笅闈㈢殑浠g爜搴旇鐪嬭捣鏉ュ儚浣犲埌鐩墠涓烘鎵€鍐欑殑銆?.MyPromise鐨勪笁绉嶇姸鎬佺瓑绛夋垜浠ソ鍍忓繕璁颁簡涓€涓緢閲嶈鐨勪笢瑗匡紝Promise鐨勪笁绉嶇姸鎬侊紒锛侊紒浣犳槸鍚﹁寰楋紵Promise鍦ㄥ垵濮嬪寲鏃舵湁涓夌鐘舵€侊紝鍒嗗埆鏄痯ending銆乫ulfilled鍜宺ejected銆傝繖涓夌鐘舵€佸垎鍒奖鍝嶆垜浠湪then鍑芥暟涓緱鍒扮殑鍊笺€傜煡閬撲簡杩欎竴鐐癸紝鎴戜滑搴旇椹笂鎯冲埌鎴戦渶瑕佸啀瀹氫箟涓€涓彉閲忔潵瀛樺偍杩欎笁涓姸鎬佸€笺€傝繕鏈変竴鐐癸紝pending鐘舵€佷細琚垵濮嬪寲锛屼篃灏辨槸璋冪敤resolve鎴栬€卹eject鍑芥暟涔嬪墠鐨勭姸鎬併€傛墍浠ユ垜浠渶瑕佸湪constructor鏋勯€犲嚱鏁拌皟鐢╡xecutor涔嬪墠锛屽皢state鐨勭姸鎬佷俊鎭敼涓簆ending锛屽搴斾笅闈㈣繖琛屼唬鐮佺殑鎰忔€濄€傚苟涓旀垜浠彲浠ユ帹瀵煎嚭鍦╮esolve鍑芥暟鍜宺eject鍑芥暟涓紝闇€瑕佸皢鐘舵€佸€煎垎鍒敼涓篺ulfilled鍜宺ejected锛屽氨鍍忎笅闈㈢殑鍐欐硶涓€鏍枫€傜敱浜庢垜浠殑then鍑芥暟浼氭牴鎹姸鎬佷紶閫掍笉鍚岀殑鍙傛暟锛屾墍浠ュ綋鐒惰淇敼鎴愪笅闈㈣繖鏍枫€備笅闈㈠簲璇ユ槸鎮ㄥ綋鍓嶇殑浠g爜銆?.鍒涘缓MyPromise瀹炰緥鐩墠鐪嬫潵鎴戜滑鐨勯€昏緫寰堜弗璋ㄥ涓嶅锛熷厛涓嶆€ョ潃鍐欎笅鏉ワ紝鑷繁璋冪敤鐪嬬湅闀夸粈涔堟牱瀛愬惂銆傛垜浠厛鑷繁鍒涘缓涓€涓猲ewMyPromise鐨勫疄渚嬨€傛牴鎹垜浠殑璁$畻锛屾帶鍒跺彴搴旇鏈変竴涓瓧绗︿覆HanZhenfang銆傝鎴戜滑鐪嬬湅缁撴灉锛氬彂鐢熶簡浠€涔堬紵鎶ラ敊锛熷埆鐫€鎬ワ紝鎴戜滑鏉ュ垎鏋愰敊璇€俇ncaughtTypeError:Cannotsetpropertiesofundefined(setting'#result')杩欓噷缁欏嚭鐨勯敊璇俊鎭槸鎴戜滑涓嶈兘灏?result鐨勫睘鎬ц缃负undefined銆傝繖鏄€庝箞鍥炰簨锛熸垜浠浣曞湪undefined涓婅缃睘鎬э紵鎴戜滑涓嶆槸鍦∕yPromise瀹炰緥涓婅缃睘鎬у悧锛熸垜杩樹笉淇★紝闈炶鎵撳嵃鍑烘潵锛屽挶浠墦鍗板嚭鏉ワ紝鐪嬬湅杩欐槸璋併€傜湅鎺у埗鍙帮細emm銆傘€傘€傚ソ鍍忔槸undefined銆傚埌搴曞彂鐢熶簡浠€涔堬紵馃閲嶇偣鏄笅闈㈢殑浠g爜銆傝繖閲屾垜浠湅浼兼槸鍦ㄥ紩鐢ㄥ疄渚嬫湰韬潵璋冪敤resolve锛屼絾瀹為檯涓婅繖閲岀殑璋冪敤鑰呭叾瀹炴槸window瀵硅薄銆備絾鏄洜涓烘垜浠湪Class绫讳腑榛樿寮€鍚簡涓ユ牸妯″紡锛屽鏋渢his涓㈠け锛宼his榛樿涓嶄細鎸囧悜鍏ㄥ眬瀵硅薄window銆傛墍浠ユ垜浠渶瑕佸仛涓€浠堕潪甯搁潪甯搁噸瑕佺殑浜嬫儏锛屾槸鐨勶紝缁戝畾杩欎釜銆傚洜涓烘垜浠瀯閫犲嚱鏁颁腑鐨則his鎬绘槸鎸囧悜瀹炰緥鏈韩锛屾墍浠ユ垜浠渶瑕佸湪璋冪敤resolve鍑芥暟鍜宺eject鍑芥暟涔嬪墠灏唗his缁戝畾鍒癳xecutor鐨勫弬鏁颁笂銆傛墍浠ユ垜浠幇鍦ㄧ殑浠g爜搴旇鏄繖鏍风殑锛氳鎴戜滑鍐嶆璋冪敤鎴戜滑鑷繁鐨凪yPromise锛岀湅鑳藉惁鎴愬姛璇诲彇鍒版垜浠繚瀛樼殑鏁版嵁銆傚彲浠ョ湅鍒帮紝鎴戜滑閫氳繃then鏂规硶鎴愬姛璇诲彇浜唕esolve浼犺繃鏉ョ殑鏁版嵁銆傛鏃朵綘鍙兘鎯崇煡閬撲负浠€涔坱hen鏂规硶涓嶇粦瀹歵his銆傚洜涓轰綘涓嶄細蹇樿鎴戜滑鐨則hen鏄€庝箞绉板懠鐨勩€傚彲浠ョ湅鍑烘垜浠殑then鏄€氳繃鎸囧悜瀵硅薄鐨勪竴涓€嬧€嬪睘鎬у悕鏉ヨ皟鐢ㄧ殑锛屾墍浠ュ畠鐨則his100%鏄暟鎹疄渚嬪璞°€傚畠涓嶉渶瑕佹垜浠€冭檻杩欎釜鎸囧悜鐨勯棶棰樸€傜患涓婃墍杩帮紝鏈枃涓昏鏄寚瀵煎ぇ瀹舵瀯寤轰竴涓狿romise楠ㄦ灦銆備綘鍙互鍏堟秷鍖栦竴涓嬨€傚湪涓嬩竴绡囨枃绔犱腑锛屾垜灏嗘洿娣卞叆鍦拌В閲婄粏鑺傘€傪煄?/p>