首頁 > web前端 > js教程 > ES6之Promise的學習

ES6之Promise的學習

hzc
發布: 2020-06-29 10:25:27
轉載
2310 人瀏覽過

Promise開篇

因為javascript非同步機制,導致一個常見的問題,回呼金字塔:

loadImg('a.jpg', function() {
    loadImg('b.jpg', function() {
        loadImg('c.jpg', function() {
            console.log('all done!');
        });
    });
});
登入後複製

Promise 字面意思,承諾。如果A調用B,B返回一個承諾給A,然後A就可以寫計劃時這麼寫:當B返回結果給我的時候,A執行S1方案,反之如果B因為什麼原因沒有給A想要的結果,那麼A執行應急方案S2,這樣的話,所有潛在風險都在A的控制範圍內

var resB = B();
var runA = function(){
   resB.then(execS1,execS2);
};
登入後複製

如果A要完成一件事,可能依賴的不是B一個響應,那麼上面的代碼就會變成

var resB = B();
var resC = C();
...
 
var runA = function() {
    reqB
        .then(resC, execS2)
        .then(resD, execS3)
        .then(resE, execS4)
        ...
        .then(execS1);
};
 
runA();
登入後複製

在這裡,每當一個詢問者做出不符合預期的應答的時候都用了不同的處理機制,雖然,Promise規範沒有要求這樣做,甚至可以不做任何處理,即(不傳入then的第二個參數),或統一處理

Promise/A 規範

  • 一個Promise可能存在三種狀態:等待( pending),已完成(fulfilled),已拒絕(rejected)

  • 一個Promise的狀態只可能從"等待"轉到"完成"或"拒絕",不能逆向轉換

  • Promise必須實作then方法,(then是promise核心),而且then必須回傳一個promise,同一個promise的then可以呼叫多次,而且回呼執行的順序和它們定義的順序一樣。

  • then方法接受兩個參數,第一個參數是成功時候的回調,另一個是失敗的回調,then可以接受另一個promise傳入,也接受一個"類then"的物件或方法,也就是thenable物件

標準的Promise

可參考html5rocks的這篇文章JavaScript Promises,目前高階瀏覽器如chrome、firefox都已經內建了Promise對象,提供更多的操作接口,例如Promise.all()
,支援傳入一個promises數組,當所有promises都完成時執行then,還有就是更加友好強大的異常捕獲,應對日常的非同步編程,應該夠了。

第三方函式庫的Promise

現今流行的各大js函式庫,幾乎都不同程度的實現了Promise,如dojo,jQuery、Zepto、when.js、Q等,只是暴露出來的大都是Deferred
對象,

尾聲

我們看到,不管Promise實作怎麼複雜,但是它的用法卻很簡單,組織的程式碼很清晰,從此不用再受callback的折磨了。
最後,Promise是如此的優雅!但Promise也只是解決了回呼的深層巢狀的問題,真正簡化JavaScript非同步程式設計的還是Generator,在Node.js端,建議考慮Generator。

推薦教學:《JS教學

以上是ES6之Promise的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jianshu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板