Promise 應用紀錄

整理一些 Promise 相關的觀念與問題。文內節錄自 promise 問題集

重點整理

• 瀏覽器的 window 有一個 Promise，可以直接使用 .resolve .reject .race .all。
• 一般建立 Promise 需要用 new 並且需要指定 resolve 否則會報錯。
• Promise.then 只有在 resolve 被執行後才會執行（.catch 同理）。
• .finally 有 resolve 或 reject 執行後會跟著執行，換句話說沒有執行 resolve 或 reject，finally 也不會執行。
• .then 和 .catch 都會返回一個新的 Promise。所以.then 或 .catch 返回的值不能是 Promise 本身，否則會造成死循環。
• .then 可以傳入兩個 function，第二個 function 可以視為是 .catch 的簡寫。但如果傳入非 function 會發生透傳。(question3-5)
• .finally 不接受任何的參數，也就是在 .finally 中是無法知道P romise 最終的狀態是 resolved 還是 rejected。

---

基礎題型

question1-1

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

question1-2

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

question1-3

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

question1-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);

hint:

• Promise.then 會回傳一個 promise
• promise.then 其實可以有兩個參數
• 兩個都是 function 分別對應 promise 的 resolve 與 reject

question1-5

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

---

Promise with setTimeout

question2-1

console.log('start')
setTimeout(() => {
  console.log('time')
})
Promise.resolve().then(() => {
  console.log('resolve')
})
console.log('end')

question2-2

const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
  console.log("timerStart");
  resolve("success");
  console.log("timerEnd");
}, 0);
console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

hint:

• promise.then((res) => {}) (用 new Promise 建構的) 與 Promise.resolve().then(() => {}) 要分清楚
• 沒有執行 resolve 之前, then 不會被執行

question2-3

Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');

question2-4

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
    console.log("timer1");
  }, 1000);
  console.log("promise1裡的內容");
});
const promise2 = promise1.then(() => {
  throw new Error("error!!!");
});
console.log("promise1", promise1);
console.log("promise2", promise2);
setTimeout(() => {
  console.log("timer2");
  console.log("promise1", promise1);
  console.log("promise2", promise2);
}, 2000);

---

Promise 的 then, catch, finally

question3-1

const promise = new Promise((resolve, reject) => {
  resolve("success1");
  reject("error");
  resolve("success2");
});
promise.then(res => {
  console.log("then: ", res);
).catch(err => {
  console.log("catch: ", err);
})

question3-2

const promise = new Promise((resolve, reject) => {
  reject("error");
  resolve("success2");
});
promise.then(res => {
  console.log("then1: ", res);
}).then(res => {
  console.log("then2: ", res);
}).catch(err => {
  console.log("catch: ", err);
}).then(res => {
  console.log("then3: ", res);
})

question3-3

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('timer')
    resolve('success')
  }, 1000)
})
const start = Date.now();
promise.then(res => {
  console.log(res, Date.now() - start)
})
promise.then(res => {
  console.log(res, Date.now() - start)
})

question3-4

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

question3-5

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

---

ANSWER

answer1-1

‘promise1’
‘1’ Promise{<pending>}

answer1-2

1 2 4 3

answer1-3

1 2 4

answer1-4

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

answer1-5

1
‘start’
‘success’

answer2-1

‘start’
‘end’
‘resolve’
‘time’

answer2-2

1
2
4
‘timerStart’
‘timerEnd’
‘success’

answer2-3

‘start’
‘promise1’
‘timer1’
‘promise2’
‘timer2’

answer2-4

‘promise1裡的內容’
‘promise1’ Promise{}
‘promise2’ Promise{}
‘timer1’
Uncaught (in promise) Error: error!!!
‘timer2’
‘promise1’ Promise{: “success”}
‘promise2’ Promise{: Error: error!!!}

answer3-1

‘then: success1’
因為 resolve 只會執行一次，已經改變該 Promise 的結果後就不會再改變

answer3-2

‘catch: ‘ ‘error’
‘then3: ‘ undefined
先執行 reject 所以會從 .catch 開始執行
且 catch 會返回另一個 Promise 但沒有執行 resolve 所以只會印出 undefined

answer3-3

‘timer’
success 1001
success 1002
Promise 內的 resolve 只會執行一次，但是 .then 可以調用多次
每次都會得到 resolve 時的值。

question3-4

“then: “ “Error: error!!!”
只要是 Promise 建構式內 return 非 Promise 的值都會被包裝成 Promise.resolve()
如果要拋出錯誤可用 throw 或 Promise.reject()

question3-5

1
.then 傳入非 function 所以透傳。由第一個 resolve 傳入的值傳到最後。