JavaScript – Promise

前言

JavaScript 的 Promise已經是不可或缺的實用方式，之後的async,await也是只Promise的應用，但我總覺得要依官方說明－Promise來解釋不是很容易懂，一個主要是名詞的定義，另一個是沒有實際的原始碼，所以我試著用我自已的方式去理解並介紹這個重要的功能。

Test Source

const myResolve = (result) => {console.log(`function myResolve has been executed, and result is ${result}`)};
const myReject = (result) => {console.log(`function myReject has been executed, and result is ${result}`)};

/*不呼叫resolve或reject*/
const execution01 = (resolve, reject) => {
    const name = "task01";
    console.log(`I'm ${name}`);
}

/*呼叫resolve*/
const execution02 = (resolve, reject) => {
    const name = "task02";
    console.log(`I'm ${name}`);
    resolve(name);
}

/*呼叫reject*/
const execution03 = (resolve, reject) => {
    const name = "task03";
    console.log(`I'm ${name}`);
    reject(name);
}

/*設定目前測試的execution*/
const execution = execution01;

const px = new Promise(execution);
console.log(px);

const p = new Promise(execution);
console.log(p);
const p2 = p.then(myResolve, myReject);
console.log(p2);

先定義了三個execution，除了執行我主要的工作console.log外，execution02在結束時呼叫resolve，execution03在結束時呼叫reject
再來我定義了myResolve，myReject，這個兩準備用在then裡的function。

一開始比較會有疑問的在於resolve跟reject，因為在這裡看不出這是什麼，實際上這是在Promise執行時，由Promise送進來的function；另一個是execution，在官方文件中，是用executor來稱呼這個要執行的function，但我覺得，這是一個被執行的function，而不是一個主動去執行的executor，所以我比較喜歡叫它execution.

Test001

第一個execution

const execution01 = (resolve, reject) => {
    const name = "task01";
    console.log(`I'm ${name}`);
}

結果

I'm task01
Promise { <state>: "pending" }

I'm task01
Promise { <state>: "pending" }
Promise { <state>: "pending" }

execution中，我只做我想做的事，然後不呼叫resolve或reject，Promise的state是”pending”
如果呼叫then，很明顯，then沒有作用，但還是回傳一個Promise物件。

Test002

第二個execution

const execution02 = (resolve, reject) => {
    const name = "task02";
    console.log(`I'm ${name}`);
    resolve(name);
}

結果

I'm task02
Promise { <state>: "fulfilled", <value>: "task02" }

I'm task02
Promise { <state>: "fulfilled", <value>: "task02" }
Promise { <state>: "pending" }
function myResolve has been executed, and result is task02

execution中，我做完我想做的事，然後呼叫resolve，Promise的state是”fulfilled”
如果有呼叫then，myResolve會被用到

Test003

第三個execution

const execution03 = (resolve, reject) => {
    const name = "task03";
    console.log(`I'm ${name}`);
    reject(name);
}

結果

I'm task03
Promise { <state>: "rejected", <reason>: "task03" }
uncaught exception: "task03"

I'm task03
Promise { <state>: "rejected", <reason>: "task03" }
Promise { <state>: "pending" }
function myReject has been executed, and result is task03

execution中，我做完我想做的事，然後呼叫resolve，Promise的state是”rejected”，而且還外加送我一個exception。
如果有呼叫then，myReject有被用到，而且exception不見了！！

檢視

這樣看起來，Promise裡有一個executor。
在進行new Promise的constructor時，就我給的execution function放到Thread裡執行，還偷塞了兩個function進來，這兩個function除了用來保留處理的結果，還會改變Promise的狀態。
如果我都沒有用到這兩個偷塞的function，Promise的狀態就不會改變。
當我想對Promise呼叫then時，我要送兩個function給它，Promise裡的executor會在我呼叫resolve或reject時，把先前處理的結果再送到這兩個function裡。

所以Promise的狀態不是因為我寫的Exection主體結果而改變，而是依據我呼叫的是resolve或reject。

總結

1. 在進行new Promise的constructor時，就有人提供Thread來執行execution。
2. resolve 跟reject是Promise提供的，用來保留結果及改變Promise的狀態。
3. 自行定義的myResolve與myReject，只能在then時使用，Promise會把先前保留的結果送進去。