淺析Promise

MrITzhongzi發表於2018-06-28
Promise

Promise: 含義

0、字面意思是 “承諾”。

1、這個物件可以獲取非同步操作的訊息。

2、Promise的狀態不受外界的影響，只和非同步返回的結果有關

簡言之：Promise表示一個非同步操作的最終狀態（完成或失敗），以及其返回的值。

Promise狀態：

pending: 初始狀態，既不是成功，也不是失敗狀態。 fulfilled: 意味著操作成功完成。 rejected: 意味著操作失敗。 Promise方法：

  1. Promise.prototype.catch(onRejected) 非同步執行失敗的回撥函式，並且會返回一個新的Promise物件。

  2. Promise.prototype.then(onFulfilled, onRejected)

非同步執行成功的回撥函式，並且會返回一個新的Promise物件。

  1. Promise.prototype.finally(onFinally)

不管成功或失敗都會執行的一個回撥函式，並且會返回一個新的Promise物件。

例項demo：

demo1：

<script>
        function test(resolve, reject) {
            var timeOut = Math.random() * 2;
            console.log('set timeout to: ' + timeOut + ' seconds.');
            setTimeout(function () {
                if (timeOut < 1) {
                    console.log('call resolve()...');
                    resolve('200 OK');
                }
                else {
                    console.log('call reject()...');
                    reject('timeout in ' + timeOut + ' seconds.');
                }
            }, timeOut * 1000);
        }

        var p1 = new Promise(test);
        var p2 = p1.then(function (result) {
            console.log('成功：' + result);
        });
        var p3 = p2.catch(function (reason) {
            console.log('失敗：' + reason);
        });
    </script>
複製程式碼

執行結果：

淺析Promise

demo1解析：生成一個隨機數，如果小於1則執行成功的回撥，大於1則執行失敗的回撥。

其中 p1.then 時成功的回撥，p2.catch時失敗的回撥。

demo2：（Promise多個任務處理流程）

<script>
        // 0.5秒後返回input*input的計算結果:
        function multiply(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' x ' + input + '...');
                setTimeout(resolve, 500, input * input);
            });
        }

        // 0.5秒後返回input+input的計算結果:
        function add(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' + ' + input + '...');
                setTimeout(resolve, 500, input + input);
            });
        }

        var p = new Promise(function (resolve, reject) {
            console.log('start new Promise...');
            resolve(123);
        });

        p.then(multiply)
            .then(add)
            .then(multiply)
            .then(add)
            .then(function (result) {
                console.log('Got value: ' + result);
            });

    </script>
複製程式碼

執行結果：

淺析Promise

demo2解析：

變數p中存了一個Promise物件，直接執行成功的回撥，並傳入 123 作為引數， 然後執行回撥multiply, multiply 函式返回一個新的 Promise物件，並將傳入的引數相乘，直接執行成功的回撥（傳入相乘以後的結果） 執行 multiply的成功回撥 add 函式，add函式 返回一個新的Promise，並將傳入的引數相加，直接執行成功的回撥（傳入相加以後的結果） 以此類推…… 知道最後一個then，執行最後一個Promise成功的回撥，並輸出到日誌。

相關文章