Promise：總結

陳林007發表於2019-04-22
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()執行完，在執行外面的
  • 對於我們來說，此時最好將其展開，會更好讀 有不正確請指正後續更新。。。

相關文章