聊一聊看似簡單的Promise.prototype.then()方法-有解無憂

Proise實體的then方法是定義在原型物件Promise.prototype上的，它的作用是為Promise實體添加狀態改變時的回呼函式，

該方法可以接收兩個回呼函式作為引數，其中第二個回呼函式是可選的，第一個回呼函式是 Promise 物件的狀態變為 Resolved 時呼叫，第二個回呼函式是 Promise 物件的狀態變為 Rejected 時呼叫，

下面從以下幾點進行說明：

then 方法回傳的是一個Promise實體，但是需要注意的是并不是原來呼叫它的那個Promise實體而是一個新的Promise實體，

下面用代碼來說明：
```
let promise = new Promise( function (resolve, reject) {
    resolve();
    console.log("promise");
});

let promise_then = promise.then(function () {
	console.log("promise_then");    
});

promise_then.then(function () {
    console.log("promise_then_then")
})

// 運行結果：
promise
promise_then
promise_then_then
```
最先列印出 promise 的原因是then方法的回呼函式要在所有同步任務執行完后再執行，所以會先執行 console.log("promise") 然后再去執行下面then方法的回呼函式，

當程式執行到第6行結束時，promise 和 promise_then 的狀態如下圖所示：

在這里插入圖片描述

可見then方法回傳的是一個新的promise實體，并且此時promise_then的狀態為 pending，

當執行完第8行時，promise 和 promise_then 的狀態如下圖所示：

在這里插入圖片描述
可見此時 promise_then 的狀態變為 resolved，也就是說只要then方法中的程式正常執行完不報錯，回傳實體的狀態就變為 resolved (這個地方原因不是很清楚，如果有明白的，歡迎留言告知，謝謝哦)，

這個時候再往下執行 promise_then.then 就會列印出 promise_then_then ，

上面的代碼等價于

// ES5寫法
let promise = new Promise( function (resolve, reject) {
    resolve();
    console.log("promise");
});
promise.then(function () {
	console.log("promise_then");    
}).then(function () {
    console.log("promise_then_then")
});

// ES6寫法
let promise = new Promise( (resolve, reject) => {
    resolve();
    console.log("promise");
});
promise.then(
    () => console.log("promise_then")    
).then( 
    () => console.log("promise_then_then")
);

then 方法中前一個回呼函式的回傳值可以傳遞給下一個回呼函式，

前一個回呼函式的回傳值是一個非promise實體時，比較簡單，看一下下面的代碼就很容易理解，

let promise = new Promise( function (resolve, reject) {
    resolve();
});
promise.then(function () {
	return "aaa"; 
}).then(function (data) {
    console.log(data);
});
// 輸出結果
"aaa"

當前一個回呼函式的回傳值是一個promise實體時，下一個then方法的執行情況要根據這個promise實體的狀態來執行，

用下面的代碼來解釋一下：

// 如果形參是'Resolved' -> 狀態為‘Resolved’的promise實體
// 如果形參是'Rejected' -> 狀態為‘Rejected’的promise實體
function createPromise(status) { 
    var p = new Promise(function (resolve, reject) {
        if (status === "Resolved") {
            resolve()
        } else {
            reject();
        }
    });
    return p;
}

createPromise("Resolved").then(function () {
    return createPromise("Rejected"); // 回傳的promise實體的狀態是“Rejected”
}).then(function () {
    console.log("前一個回呼函式的回傳值promise實體的狀態是'Resolved'");
}, function () {
    console.log("前一個回呼函式的回傳值promise實體的狀態是'Rejected'");
});
// 輸出結果
"前一個回呼函式的回傳值promise實體的狀態是'Rejected'"

createPromise("Resolved").then(function () {
    return createPromise("Resolved"); // 回傳的promise實體的狀態是“Resolved”
}).then(function () {
    console.log("前一個回呼函式的回傳值promise實體的狀態是'Resolved'");
}, function () {
    console.log("前一個回呼函式的回傳值promise實體的狀態是'Rejected'");
});
// 輸出結果：
"前一個回呼函式的回傳值promise實體的狀態是'Resolved'"

根據上面代碼的輸出結果可以清晰地看到后一個回呼函式的執行情況是根據前一個回呼函式回傳的promise的狀態來執行的，如果回傳的promise實體的狀態為 Resolved ，那么就執行第一個函式，如果回傳的promise實體的狀態為 Rejected ，那么就執行第二個函式，

完，如果不恰當之處，歡迎指正哦，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160794.html

標籤：JavaScript

上一篇：高維護性的JavaScript

下一篇：移動端h5禁用瀏覽器左滑右滑的前進后退功能