初識promise

wade3po發表於2019-02-02
Promise

Promise是ES6新出的一個建構函式，最主要的就是為了解決回撥地獄的問題。Promise三個狀態：pending初始狀態，fulfilled（resolve）成功狀態，rejected（reject）失敗狀態。

語法：

new Promise( function(resolve, reject) { } );

Promise建構函式接收一個函式為引數，這個函式接收兩個函式引數一個是成功resolve，一個是失敗reject。

先看一下最簡單的例子：

var promise = new Promise(function (resolve, reject) {
    var num = parseInt(Math.random() * 10);
    if(num > 5){
        resolve(num);
    }else{
        reject('失敗了');
    }
});

promise.then(function (value) {
    console.log(value);
}).catch(function (value) {
    console.log(value);
});
複製程式碼

隨機數大於5就是成功，否則失敗。這樣一看好像沒什麼太大的用處，用回撥就能解決。確實，如果只是普通的方法或者是隻用一次兩次的方法，沒必要使用Promise，但是封裝一個公用的方法，注意是公用方法，意思就是會一直呼叫，比如ajax、axios或者選擇檔案方法封裝等就很有用。

簡單鏈式呼叫：

new Promise(function(resolve, reject){
    console.log(100)
    resolve();
}).then(function(resolve, reject) {
    for(var i = 0; i < 10000;i++){
        console.log(200)
    };
}).then(function(resolve, reject)  {
    console.log(300)
});
複製程式碼

這樣的鏈式呼叫會嚴格按順序執行，且第一個可以判斷成功失敗是否執行，但是其他無法攔截失敗，雖然這有點旁門左道，但是本人認為有時候簡單使用還是可以的。

標準鏈式呼叫：

Promise在then方法裡面返回一個Promise物件，就可以直接鏈式呼叫。

new Promise(function(resolve, reject){
    resolve('star');
}).then(function(data){
    console.log('two: ', data);
    return new Promise(function(resolve, reject){
        resolve('two result');
    });
}).then(function(data){
    console.log('three: ', data);
    return new Promise(function(resolve, reject){
        resolve('three result');
    });
}).then(function(data){
    console.log('end result: ', data);
}).catch(function(err){
    console.log('err: ', err);
});
複製程式碼

在return的Promise裡面如果是reject，那麼會直接執行最後的catch方法。雖然成功是不會執行catch方法，但是最好都寫上，就好比switch的default一樣。

歡迎關注Coding個人筆記 公眾號

相關文章