學習Promise

sou發表於2018-03-21
Promise

學習Promise

理解 Promise

Promise 簡介:

一個 Promise 有3個狀態。他們分別是：

  1. Promise 是待定的（pending）： 不確定當前任務是否滿足條件
  2. Promise 是已解決的（resolved）：當前任務滿足條件
  3. Promise 是被拒絕的（rejected）: 當前任務不滿足條件

建立一個 Promise

/* ES5 */ var Result = false; 
// Promise
var isFulfil = new Promise(
    function (resolve, reject) {
        if (fulfil) {
            var value = 1;  (result用value表示)
            resolve(value); // 完成了
        } else {
            var reason = new Error('不滿足條件');（result用reason表示）
            reject(reason); // reject
        }

    }
);
複製程式碼

  1. 我們用一個布林值isfulfil，來定義條件是否滿足。

  2. 我們有一個命名為isfulfil的Promise。這個 Promise 可以是 已完成的（resolved）（滿足條件）或者 被拒絕的（rejected） （沒有滿足條件）。

  3. 這裡有一個標準的語法來新建一個 Promise，參考MDN 文件，一個 promise 語法看上去像這樣。

支援的快捷鍵有：

// promise 語法看上去像這樣
new Promise(/* executor*/ function (resolve, reject) { ... } );
複製程式碼
  1. 當條件滿足， promise呼叫 resolve 函式和 結果變數value。如果不滿足用 reject 函式和一個理由（reason）reject(reason)；

使用 Promise

現在，我們有一個 Promise。來看看怎麼使用它：

/* ES5 */
...
// 呼叫我們的 Promise
var p = function () {
   isFulfil
        .then(function (fulfilled) {
            // 滿足條件
            console.log(fulfilled);
         // output: value
        })
        .catch(function (error) {
            // 不滿足條件
            console.log(error.message);
         // output: 'reson'
        });
};
p();
複製程式碼
  1. 我們有一個名為p的函式。在這個函式中，我們會使用 Promise isFulfil。
  2. 一旦 Promise 被解決（resolved）或者被拒（rejected），我門希望採取些措施。我們用 .then 和 .catch 來實現。
  3. 在我們的例子中，.then 之中有個 function(fulfilled) { ... } 。fulfilled 是什麼？fulfilled 就是是你傳入 Promise 的 resolve(your_success_value).因此，在我們例子中就是 value。
  4. 我們在 .catch 中有 function(error){ ... }。error 是什麼？正如你猜測的，error 正是你傳入 Promise 中的 reject(your_fail_value)。因此，在我們的例子中就是 reason。

讓我們看看例子執行之後的結果吧！

Demo

學習Promise

串聯 Promise

Promiss 是可串聯的。

也就是說，一個條件滿足了可以判斷下一個條件是否滿足

這就是另一個 Promise 啦。我們來寫一個！

說明:

  • 在這個例子中，你可能意識到我們沒有呼叫 reject。因為這個是可選的引數。

  • 我們可以簡化這個樣例就像用 Promise.resolve 代替。


    // 簡略
    ...

    // 第二個 promise
    var second = function (value) {
        var message = 'second new value';
        return Promise.resolve(message);
    };

複製程式碼

讓我們串聯 Promise。你，寶寶只能在isFulfil Promise 實現之後，才能開始 second Promise。


    ...
    // 呼叫 Promise
    var p = function () {
        isFulfil
        .then(second) // 在這裡串聯
        .then(function (fulfilled) {
                console.log(fulfilled);
            // output: 'second new value'
            })
            .catch(function (error) {
                // 不滿足條件
                console.log(error.message);
            // output: '不滿足條件'
            });
    };

複製程式碼

Promises 是非同步的

Promise 是非同步的。讓我們在呼叫 Promise 之前和之後各列印一個資訊。


    // 呼叫我們的Ppromise
    var p = function () {
        console.log('判斷條件之前'); // 執行之前列印
        isFulfil
            .then(second)
            .then(function (fulfilled) {
                console.log(fulfilled);
            })
            .catch(function (error) {
                console.log(error.message);
            });
        console.log('判斷條件之後'); // 執行之後列印
    }

複製程式碼

輸出順序是這樣的：

    1. 判斷條件之前
    2. 判斷條件之後
    3. second new value
複製程式碼

因為JavaScript不等判斷條件。

第一次條件判斷的時候等待著p的承諾（promise 這個我們稱之為 非同步（asynchronous）, 程式碼不會因為阻塞或等待結果而不執行. 任何想等待 Promise 之後再執行的, 你需要把他們放入 .then

相關文章