ES6 Promise、resolve()、then()、reject()、catch()

Posted on Edited on In Views: Disqus:

 

一、Promise 物件

語法：

new Promise(function (resolve, reject) {
    // sync or async codes
    // if success, resolve
    // if fail, reject
});

範例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <script>
        function getData() {
            return new Promise((resolve, reject) => {
                let theValue = "T";

                if (theValue === 'T') {
                    resolve("YES");
                } else {
                    reject("No");
                }

            });
        }

        getData().then(result => {
            console.log(result);
        })
            .catch(err => {
                console.log(err);
            });

    </script>
</body>

</html>

說明：

1、當答應一個承諾，不管成功(resolve)或失敗(reject)，都要回報回去，

這樣使用 Promise 物件才會有義意(你也可以不回報，那就屬於 padding 狀態，請往下看第五項)。

2、function (resolve, reject) 中的 resolve、reject 非關鍵字，

固定第一個參數是 fulfilled (resolve) 用途；第二個參數是 rejected (reject) 用途。

3、function (resolve, reject) 中的 resolve 參數為必要項、reject 參數為選項。

4、function (resolve, reject) 中的 resolve 參數是一個 function、reject 參數也是一個 function。

 

二、resolve()、then()

一個承諾，做完了，可以回報一個 resolve 的字串信息

var resolvePromise = new Promise(function (resolve) {
    setTimeout(function () {
        resolve('the resolve message');
    }, 1000);
});

所以當許下一個承諾，可以用 then 來接收其成功的回報，並在 then 裡做其他事情，

var resolvePromise = new Promise(function (resolve) {
    setTimeout(function () {
        resolve('the resolve message');
    }, 1000);
});

resolvePromise.then(function (resolveMessage) {
    console.log(resolveMessage);
});

此例為在 then 裡印出「成功的回報」的字串值。

 

then() 的語法為 Promise.then(onFulfilled[, onRejected])。

onFulfilled 參數是一個 function，當 promise 成功時會呼叫；

onRejected 參數是一個 function，其參數為選項，當 promise 失敗時會呼叫。

 

三、reject()、catch()

function resolve 回傳的字串信息可以用 then 來接，相同的，

function reject 回傳的字串信息可以用 catch 來接。

 

一個承諾，做完了，可以回報一個 reject 的字串信息

var rejectPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        reject('the reject message');
    }, 1000);
});

所以當許下一個承諾，可以用 catch 來接收其失敗的回報，並在 catch 裡做其他事情，

var rejectPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        reject('the reject message');
    }, 1000);
});

rejectPromise.catch(function (rejectMessage) {
    console.log(rejectMessage);
});

此例為在 catch 裡印出「失敗的回報」的字串值。

 

四、Promise Chain

var resolvePromise = new Promise(function (resolve) {
    setTimeout(function () {
        resolve('the resolve message');
    }, 1000);
});

resolvePromise.then(Show).then(Accomplish);

function Show(resolveMessage) {
    console.log("Show " + resolveMessage);
    return resolveMessage;
}

function Accomplish(receiveMessage) {
    console.log("Accomplish " + receiveMessage);
}

承諾是可以串接的，如範例，then function 執行完後，

then function 執行完後，會 return 字串值包裹成一個 Promise，並回傳回去。

 

五、pending

一個承諾做完故意不回報，那該「承諾」的狀態就是屬於 pending。

var resolvePromise = new Promise(function (resolve) {
    setTimeout(function () {
        //resolve('the resolve message');
    }, 1000);
});

console.log(resolvePromise);

 

六、其他範例

function apple() {
    console.log("apple");
    return new Promise(
        function (resolve, reject) {
            resolve("apple sucess");
        }
    );
}

var m = apple().then(
    (value) => {
        console.log(value);
    }
);

function banana() {
    console.log("banana");
    return new Promise(
        function (resolve, reject) {
            reject("banana fail");
        }
    );
}

var n = banana().catch(
    (value) => {
        console.log(value);
    }
);

function kiwi() {
    console.log("kiwi");
    return new Promise(
        function (resolve, reject) {
            //resolve("kiwi sucess");
            reject("kiwi fail");
        }
    );
}

var o = kiwi().then(
    (value) => {
        console.log("onCompleted " + value);
    },
    (value) => {
        console.log("onRejected " + value);
    }
);

說明：

1、then() 方法為異步執行，當.then()前的方法執行完後再執行 then() 內部的程序，

這樣也確保了 .then() 前的方法一定會被執行。

 

參考資料：

Promise

JavaScript - Promise (2)