Promise簡單使用

ES6原生提供了Promise對象。所謂Promise,就是Node中的一個對象,用來傳遞異步操作的消息。

Promise的特點
  1. 對象的狀態不受外界影響。Promise對象代表一個異步操作,有三種狀態:Pending、Resolved和Rejected。只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,他的英語意思就是【承諾】,表示其他手段無法改變。
  2. 一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生,狀態就凝固了,不會再變,會一直保持這個結果。就算改變已經發生了,你在對Promise對象添加回調函數,也會立即得到這個結果,這與實踐(Event)完全不同,事件的特點是:如果你錯過了它,再去監聽,是得不到結果的。

Promise簡單例子

創建一個Promise
var promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('執行完成');
        resolve('隨便什么數據');
    }, 1500)
})

Promise的構造函數接收一個參數,就是一個函數,并傳入兩個參數:resolve、reject,分別表示異步操作執行成功后的回調函數和異步執行失敗后的回調函數。其實這里用“成功”和“失敗”來描述并不準確,按照標準來講,resolve是將Promise的狀態置為fullfiled,reject是將Promise的狀態置為rejected。不過在我們開始階段可以先這么理解,后面再細究概念。

上邊的例子中,我們只是創建了一個Promise的對象,并沒有調用它,然后我們來看下邊的這個完整的例子:

function runAsync () {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('執行完成');
            resolve('隨便什么數據');
        }, 2000);
    });
    return promise;
}
runAsync();

這個時候你應該有兩個疑問:1. 包裝這么一個函數有什么用?2. resolve('隨便什么數據');這個是干什么的?

接下來我們繼續講。在我們包裝好的函數最后,會return出Promise對象,也就是說,執行這個函數我們得到了一個Promise對象。還記得Promise對象上有then、catch方法吧。這就是強大之處了,看下邊的代碼:

runAsync().then(function (data) {
    console.log(data);
    // 后邊可以用傳過來的數據來做一些其他操作
    // ......
});

在runAsync()的返回上直接調用then方法,then方法接收一個參數,是函數,并且會拿到我們在runAsync中調用resolve時傳的參數。運行這段代碼,會在兩秒后輸出“執行完成”,“隨便什么數據”。

以上的例子中還不能很好的表現出Promise的強大之處,下面我們開始講解鏈式操作

鏈式操作

首先看一個例子

function runAsync1(){
    var promise = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務1執行完成');
            resolve('隨便什么數據1');
        }, 1000);
    });
    return promise;
}
function runAsync2(){
    var promise = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務2執行完成');
            resolve('隨便什么數據2');
        }, 2000);
    });
    return promise;
}
function runAsync3(){
    var promise = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務3執行完成');
            resolve('隨便什么數據3');
        }, 2000);
    });
    return promise;
}
runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return runAsync3();
    })
    .then(function (data) {
        console.log(data);
    });

這段代碼運行的結果是:

異步任務1執行完成
隨便什么數據1
異步任務2執行完成
隨便什么數據2
異步任務3執行完成
隨便什么數據3

如果我們來把上班執行的代碼改為這樣:

runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return '直接返回數據';
    })
    .then(function (data) {
        console.log(data);
        done();
    });

這樣執行完的結果就會變成:

異步任務1執行完成
隨便什么數據1
異步任務2執行完成
隨便什么數據2
直接返回數據

這里的原因自己慢慢體會吧!!!

reject的用法

到這里,你應該對Promise有了最基本的了解了。在ES6中除了resolve,還有reject這個功能。?事實上,我們前面的例子中都是只有“執行成功”的回調,還沒有“失敗”的情況,reject的作用就是把Promise的狀態置為rejected,這樣我們在then中就能捕捉到,然后執行“失敗”情況的回調,看下面的代碼:

function getNumber() {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num = Math.ceil(Math.random() * 10);
            if (num < 5) {
                resolve(num);
            } else {
                reject('數字太大了');
            }
        }, 1000);
    });
    return promise;
}
getNumber().then(
    function (data) {
        console.log('resolved');
        console.log(data);
    },
    function (reason, data) {
        console.log('rejected');
        console.log(reason);
    });

getNumber函數用來獲取一個數字,1秒后執行完成,如果數字小于5,我們認為是“成功”了,調用resolve修改Promise的狀態。否則我們就認為是“失敗”了,調用reject并傳遞一個參數,作為失敗的原因。

運行getNumber并且在then中傳了兩個參數,then方法可以接受兩個參數,第一個對應resolve的回調,第二個對應reject的回調。所以我們能夠分別拿到他們傳過來的數據,多次運行這段代碼,你會隨機到下面兩種結果:

resolved
3
或者
rejected
數字太大了

catch的用法

我們知道Promise對象除了then方法,還有一個catch方法,他是做什么用的呢?其實它和then的第二個參數一樣,用來指定reject的回調,用法是這樣的:

getNumber()
    .then(function (data) {
        console.log('resolved');
        console.log(data);
    })
    .catch(function (reason) {
        console.log('rejected');
        console.log(reason);
    })

效果和寫在then的第二個參數里邊是一樣的。不過它還有另一個作用:在執行resolve的回調(也就是上面then中的第一個參數)時,如果拋出異常(代碼出錯),那么并不會報錯卡死js,而是進到這個catch方法中。請看下面的代碼:

getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        console.log(somedata); //此處的somedata未定義
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

在resolve的回調中,我們console.log(somedata);而somedata這個變量是沒有被定義的。如果我們不用Promise,代碼運行到這里就直接在控制臺報錯了,不往下運行了。但是這里,我們會得到這樣的結果:

resolved
4
rejected
[ReferenceError: somedata is not defined]

all的用法

Promise的all方法提供了并行執行異步操作的能力,并且在所有異步操作執行完后才執行回調。我們仍舊使用上面定義好的runAsync1、runAsync2、runAsync3這三個函數,看下面的例子:

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

會打印:

異步任務1執行完成
異步任務2執行完成
異步任務3執行完成
[ '隨便什么數據1', '隨便什么數據2', '隨便什么數據3' ]

有了all,你就可以并行執行多個異步操作,并且在一個回調中處理所有返回數據,是不是很酷?有一個場景是很適合用這個的,一些游戲類的素材比較多的應用,打開網頁時,預先加載需要用到的各種資源,比如圖片、flash以及各種靜態文件。所有的都加載完后,我們進行頁面的初始化。

race的用法

all方法的效果實際上是【誰跑得慢,以誰為準執行回調】,那么相對的就有另一個方法【誰跑的快,以誰為準執行回調】,這就是race方法,這個詞本來就是賽跑的意思。race的用法與all一樣,我們把上面runAsync()的延時改為1秒來看一下:

Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

這個異步操作同樣是并行執行的。1秒后runAsync已經執行完了,此時then里面的就執行了。結果是這樣的:

異步任務1執行完成
隨便什么數據1
異步任務2執行完成
異步任務3執行完成

這個時候runAsync2()和runAsync3()并沒有停止,仍舊再執行。于是再過1秒后,輸出了他們結束的標志。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,570評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,505評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,786評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,219評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,438評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,971評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,796評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,995評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,230評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,697評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容