關於多個Promise對象及then()函數的執行順序的研究記錄

今天終於想要研究一下多個 Promise 對象的執行順序問題了，在研究完后記錄一下。

我想研究的是以下問題：

1、多個 Promise 對象及其then函數的執行順序，這里不研究處於不同狀態的 Promise 對象的執行順序

2、在 Promise 中的定時器延時問題（這個問題其實在 MDN 和阮一峰老師的 ES6 入門中都講過，只是我光看文字有點暈，所以自己寫代碼來理解）

廢話不多說，先上代碼吧

// 延時執行
new Promise(resolve => setTimeout(() => {
    resolve()
}, 1000))
.then(() => console.log('我是延時執行的'))
.catch(e => console.error(e))
// 在第二個then()函數運行時打印
new Promise(resolve => resolve()).then(() => '這是第三步打印的')
.then(value => console.log(value))
.catch(e => console.log('錯誤是：'+e))
// 在第二個then()函數運行時打印，與上一個Promise不同的是令Promise變成fulfilled狀態的方法不同
Promise.resolve().then(() => '這也是第三步打印的')
.then(value => console.log(value))
.catch(e => console.log('錯誤是：'+e))
// 在第二個then()函數運行時打印
new Promise(resolve => resolve()).then(() => '這還是第三步打印的')
.then(value => console.log(value))
.catch(e => console.log('錯誤是：'+e))
// 在第一個then()函數運行時打印
const p = value => {
    return new Promise(resolve => resolve(value))
}
p('這是第二步打印的').then(value => console.log(value))
// 在第一個then()函數運行時打印
new Promise(resolve => resolve()).then(() => console.log('這也是第二步打印的'))
.catch(e => console.log('錯誤是：'+e))
// 在Promise構造函數執行時打印
new Promise(() => console.log('這是第一步打印的'))
.catch(e => console.error(e));
// 非異步打印
console.log('這不在Promise中');

代碼的運行結果如下

 

 那么，根據打印的結果，我理解的 Promise 的執行邏輯是：

1. 按同步的運行順序，執行 Promise 的構造函數

2. 將所有 Promise 構造函數后的第一個 then() 函數放入異步隊列中（如果存在的話）

3.1 將所有 Promise 構造函數后的第二個 then() 函數放入異步隊列中（如果存在的話）

3.2 執行異步隊列中的 then() 函數

注：3.1 與 3.2 是我搞不清楚具體的執行順序，猜測的可能的執行方式，因為我覺得兩種執行順序的結果相同，所以就當作是兩種分支看待好了，以下的 .1 與 .2 對應 3.1 與 3.2

4.1 將所有 Promise 構造函數后的第 X 個 then() 函數放入異步隊列中，重復執行直到所有 then() 函數已放入異步隊列中，執行異步隊列中的 then() 函數

4.2 將所有 Promise 構造函數后的第X個 then() 函數放入異步隊列中（如果存在的話），執行異步隊列中的 then() 函數，重復該步驟直到所有 then() 函數均已執行完畢。

另外，當在 Promise 中使用定時器時，會在定時器結束后令后一個 then() 函數進入異步隊列。