問題描述

這幾天看了翻了很多關(guān)于 「promise」相關(guān)技術(shù)貼，看的是眼花繚，一知半解大概了解其作用。

先說說問題吧，項(xiàng)目中用到最多少就是Ajax，有個(gè)很不爽的問題「多條ajax依賴請(qǐng)求」假設(shè)： R1 > R2( r1_result ) > R3( r2_result )，最省事的做法全部都同步了吧，結(jié)果就是體驗(yàn)很糟糕，頁(yè)面一度假死，loading 也不轉(zhuǎn)了，使用異步操令人惡心的就是一層套一層的回調(diào)，以及后續(xù)更多的依賴操作。

生命在于折騰，于是就回到了第一段中各種翻閱，看到某位兄臺(tái)對(duì) promise 原理刨析，下面引用這位兄臺(tái)中的code，http://malcolmyu.github.io/ma...

function Promise(fn) { var state = ’pending’; var value; var deferred = null; function resolve(newValue) { if(newValue && typeof newValue.then === ’function’) { newValue.then(resolve, reject); return; } state = ’resolved’; value = newValue; if(deferred) { handle(deferred); } } function reject(reason) { state = ’rejected’; value = reason; if(deferred) { handle(deferred); } } function handle(handler) { if(state === ’pending’) { deferred = handler; return; } var handlerCallback; if(state === ’resolved’) { handlerCallback = handler.onResolved; } else { handlerCallback = handler.onRejected; } if(!handlerCallback) { if(state === ’resolved’) {handler.resolve(value); } else {handler.reject(value); } return; } var ret = handlerCallback(value); handler.resolve(ret); } this.then = function(onResolved, onRejected) { return new Promise(function(resolve, reject) { handle({onResolved: onResolved,onRejected: onRejected,resolve: resolve,reject: reject }); }); }; fn(resolve, reject);}

看完我不禁又疑惑了， then( function(){ do... } )，這丫還不是個(gè)回調(diào)嘛，難道是折騰的意義就是套個(gè)語法糖（我不信）。

存在即合理，所以最后怎樣合理使用 promise， 如何更優(yōu)雅操作ajax流程？順便提下有使用 （ axios fetch.js ）感覺如何？

問題解答

Promise 就是為了解決異步流程控的而生的,其使用核心就是then方法; then初看起來是很像回調(diào),但then的特質(zhì)是可以處理異常及鏈?zhǔn)綄懛? 打個(gè)比方,幾個(gè)ajax請(qǐng)求依賴如下:

A1 -> A2; Aa -> Ab;Ab + Ac -> Ad;A2 + Ad -> Ax;

如果用Promise,代碼會(huì)很清晰 首先準(zhǔn)備好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是根據(jù)依賴反回promise對(duì)像的函數(shù),我就不寫了 然后可以看Promise表演了:

Promise.all([ A1().then(A2), //A1 -> A2 Promise.all([Aa().then(Ab), //Aa -> AbAc() //Ac ]).then(Ad) //Ab + Ac -> Ad;]).then(Ax,Err) //A2 + Ad -> Ax.then(function(v){//完成})

A1,Aa和Ac沒有依賴,會(huì)并發(fā)執(zhí)行,之后會(huì)根據(jù)依賴完成的情況來繼續(xù), 不論哪一個(gè)Ajax出問題,都會(huì)觸發(fā)最后的Err事來統(tǒng)一處理錯(cuò)誤; 如果你用回調(diào)來寫一下試試,要么效率不好,要么回調(diào)方法里加一堆代碼來判斷依賴的情況.

參考代碼:

//首先準(zhǔn)備好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是基于回調(diào)的異步函數(shù)var a2,ab,ac,ad; //用來保存完成情況的變量function runAx(){ if(a2 == undefined || ad == undefined) return; //判斷依賴 Ax(a2,ad,function(e,v){//完成 })}function runAd(){ if(ab == undefined || ac == undefined) return; //判斷依賴 Ad(ab,ac,function(e,v){ad = v;runAx(); })}A1(function(e,v){ A2(v,function(e,v){a2 = v;runAx(); })})Aa(function(e,v){ Ab(v,function(e,v){ab = v;runAd(); })})Ac(function(e,v){ ac = v; runAd();})

上面的代碼沒有去處理error,就這么長(zhǎng)了,如果依賴再?gòu)?fù)雜一點(diǎn),可以想象代碼量,而且容易寫錯(cuò);

你的理解基本上對(duì)，實(shí)際上Promise沒簡(jiǎn)化多少，只是減少了嵌套的層級(jí)。

所以，終極解決方案就是Async/Await，題主可以去查查看資料。

優(yōu)雅就是一個(gè)then接一個(gè)then，把回調(diào)圣誕樹造型擼直，這就是Promises的貢獻(xiàn)。

我寫程序要七八個(gè)回調(diào)嵌套，Promises爽的一比。

你覺得then寫法都嫌麻煩，那就不要用咯，用Async/Await