一文幫你把脈：瞭解自己的Promise功底（Promise筆試題）

文本已開啟銀杏化模式，題目難度從簡入難，非常銀杏 1.1 題目一 const promise1 = new Promise((resolve, reject) => { console.log('promise1') }) console.log('1', promise1); 先自己作答，別偷看答 ...

文本已開啟銀杏化模式，題目難度從簡入難，非常銀杏

1.1 題目一

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答，別偷看答案-------------------------------------------------------------------------------------------------------

解析過程：

從上至下，先遇到new Promise，執行該構造函數中的代碼promise1
然後執行同步代碼1，此時promise1沒有被resolve或者reject，因此狀態還是pending

結果：

'promise1'
'1' Promise{<pending>}

1.2 題目二

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

解析過程：

從上至下，先遇到new Promise，執行其中的同步代碼1
再遇到resolve('success')，將promise的狀態改為了resolved並且將值保存下來
繼續執行同步代碼2
跳出promise，往下執行，碰到promise.then這個微任務，將其加入微任務隊列
執行同步代碼4
本輪巨集任務全部執行完畢，檢查微任務隊列，發現promise.then這個微任務且狀態為resolved，執行它。

結果：

1 2 4 3

1.3 題目三

const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

解析過程：

和題目二相似，只不過在promise中並沒有resolve或者reject
因此promise.then並不會執行，它只有在被改變了狀態之後才會執行。

結果：

1 2 4

1.4 題目四

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

解析過程：

從上至下，先遇到new Promise，執行該構造函數中的代碼promise1
碰到resolve函數, 將promise1的狀態改變為resolved, 並將結果保存下來
碰到promise1.then這個微任務，將它放入微任務隊列
promise2是一個新的狀態為pending的Promise
執行同步代碼1，同時列印出promise1的狀態是resolved
執行同步代碼2，同時列印出promise2的狀態是pending
巨集任務執行完畢，查找微任務隊列，發現promise1.then這個微任務且狀態為resolved，執行它。

結果：

'promise1' 
'1' Promise{<resolved>: 'resolve1'} 
'2' Promise{<pending>}
'resolve1'

1.5 題目五

const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
}))
fn().then(res => {
  console.log(res)
})
console.log('start')

解析過程：

fn函數它是直接返回了一個new Promise的，而且fn函數的調用是在start之前，所以它裡面的內容應該會先執行。

結果：

1
'start'
'success'

1.6 題目六

const fn = () =>
  new Promise((resolve, reject) => {
    console.log(1);
    resolve("success");
  });
console.log("start");
fn().then(res => {
  console.log(res);
});

解析過程：

現在start就在1之前列印出來了，因為fn函數是之後執行的。

註：之前我們很容易就以為看到new Promise()就執行它的第一個參數函數了，其實不然，就像這兩道題中，我們需要註意它是否被包裹在函數當中，如果是，只有在函數調用的時候才執行。

結果：

"start"

"success"

未完待續...