Promise：總結

Promise MDN中文解釋

• Promise對象用於異步計算
• 一個Promise表示一個如今、未來或永不可能可用的值

Promise 按照用途來解釋

• 主要用於異步計算
• 可用將異步操做隊列化，按照指望的順序執行，返回符合預期的結果
• 能夠在對象之間傳遞和操做Promise,幫助咱們處理隊列

爲何有Promise？

• javaScript爲檢查表單而生
• 建立它的首要目標是操做DOM
• 全部，javaScript的操做大可能是異步的

同步和異步

同步： 順序交付的工做1234，必須按照1234的順序完成

複製代碼

異步

• 異步： 是將耗時很長的A交付的工做交給系統以後，就去繼續作B交付的工做。等待系統完成前面的工做以後，再經過回調或者事件，繼續作A剩下的工做（AB工做的完成順序，和交付他們的時間順序無關）。
• 事件偵聽與相應：

document.getElementById('start').addEventListener('click', start, false);

function start() {
    //響應事件，進行相應的操做
}

// jQuery用 '.on()'也是事件偵聽
$('#start').on('click', start);
複製代碼

回調

• 嵌套層次很深，難以維護
• 沒法正常使用return和throw
• 沒法正常檢索堆棧信息
• 多個回調之間難以創建聯繫

// 比較常見的有ajax
$.ajax('http://baidu.com', {
    success: function (res) {
        // 這裏就是回調函數了
    }
})

// 或者在頁面加載完畢後回調
$(function (){
    // 這裏也是回調函數
})
複製代碼

• 回調地獄

a(function (a) {
    b(a, function(b){
        c(b, function(c) {
            d(c, function(d){
                console.log(d);
            })
        })
    })
})
複製代碼

Promise 詳解

• Promise 是一個代理對象，它和原來要進行的操做並沒有關係
• 它經過引入一個回調，避免更多的回調

Promise有3個狀態：

• pending[待定]初始狀態
• fulfilled[實現]操做成功
• rejected[被否認]操做失敗
• Promise狀態發現改變，就會觸發.then()裏的響應函數處理後續步聚
• Promise 狀態一經改變，不會再變

new Promise(
    // 執行器 executor
    function (resolve, reject) {
        // 一段耗時很長的異步操做
        resolve(); // 數據處理完成
        reject(); // 數據處理出錯
    }
).then(function A() {
    // 成功，下一步
}, function B() {
    // 失敗，作相應處理
})
   
複製代碼

最簡單的實例

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then(value => {
    console.log(value + 'ni hao');
})
複製代碼

最簡單的實例升級版

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then( value => {
    console.log(value);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('world');
        }, 2000);
    })
}).then(value => {
    console.log(value + 'ni hao');
})
複製代碼

最簡單的實例增強版

console.log('start');

let promise = new Promise(resolve => {
    setTimeout(() => {
        console.log('then promise fulfilled');
        resolve('hello, world');
    }, 2000)
});

setTimeout(() => {
    promise.then(value => {
        console.log(value);
    });
}, 3000)
複製代碼

案列

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then( value => {
    console.log(value);
    console.log('everyone');
    (function() {
       return new Promise(resolve => {
            setTimeout(() => {
                console.log('Mr.xiaolin')
                resolve('Mr.xiaolin');
            }, 2000);
       });
    }());
    return false;
    
}).then(value => {
    console.log(value + 'ni hao');
})
複製代碼

.then()

• .then()接受兩個函數做爲參數，分別表明fulfilled和rejected
• .then()返回一個新的Promise實例，因此它能夠鏈式調用
• 當前面的Promise狀態改變時，.then()根據其最終狀態，選擇特定的狀態響應函數執行
• 狀態響應函數能夠返回新的Promise，或其餘值
• 若是返回新的Promise，那麼下一級.then()會在新Promise狀態改變以後執行
• 若是返回其它任何值，則會馬上執行下一級.then()

.then()裏有.then()的狀況

• 由於.then()返回的仍是Promise實例
• 會等裏面的.then()執行完，在執行外面的
• 對於咱們來講，此時最好將其展開，會更好讀

console.log('start');
new Promise(resolve => {
   console.log('Step 1')
    setTimeout(()=>{
        resolve(100);
    }, 1000);
}).then( value => {
    console.log(value);
    return new Promise(resolve => {
        console.log('Step 1-1')
        setTimeout(() => {
            resolve(110);
        }, 1000);
    })
}).then(value => {
    console.log('Step 1-2');
    return value;
}).then(value => {
    console.log('Step 1-3');
    return value;
})
.then( value => {
   console.log(value);  
 })
複製代碼

有不正確請指正後續更新。。。