Promise中的then、catch、finally總結

總結：

1、Promise的狀態一經改變就不能再改變。

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);
  })
// then：success1

2.、then和catch都會返回一個新的Promise。

3、catch不管被連接到哪裏，都能捕獲上層未捕捉過的錯誤。

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

//"catch: " "error"  驗證第三點的總結
//"then3: " undefined  驗證第二點總結

4、在Promise中，返回任意一個非 promise 的值都會被包裹成 promise 對象，例如return 2會被包裝爲return Promise.resolve(2)。

5、Promise 的 .then 或者 .catch 可以被調用多次, 但如果Promise內部的狀態一經改變，並且有了一個值，那麼後續每次調用.then或者.catch的時候都會直接拿到該值。

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)
})

//'timer'
//'success' 1001
//'success' 1002
// Promise 的 .then 或者 .catch 可以被調用多次，但這裏 Promise 構造函數只執行一次。
// 或者說 promise 內部狀態一經改變，並且有了一個值，那麼後續每次調用 .then 或者 .catch 都會直接拿到該值。

6、.then 或者 .catch 中 return 一個 error 對象並不會拋出錯誤，所以不會被後續的 .catch 捕獲。

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

//"then: " "Error: error!!!"

// 這驗證了第4點和第6點，返回任意一個非 promise 的值都會被包裹成 promise 對象，
// 因此這裏的return new Error('error!!!')也被包裹成了return Promise.resolve(new Error('error!!!'))。

當然如果你拋出一個錯誤的話，可以用下面的任意一種：

return Promise.reject(new Error('error!!!'));
// or
throw new Error('error!!!')

7、.then 或 .catch 返回的值不能是 promise 本身，否則會造成死循環。

8、.then 或者 .catch 的參數期望是函數，傳入非函數則會發生值透傳。

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

// 1
// 第一個then和第二個then中傳入的都不是函數，一個是數字類型，一個是對象類型
// 因此發生了透傳，將resolve(1) 的值直接傳到最後一個then裏。

9、.then方法是能接收兩個參數的，第一個是處理成功的函數，第二個是處理失敗的函數，再某些時候你可以認爲catch是.then第二個參數的簡便寫法。

10、.finally方法也是返回一個Promise，他在Promise結束的時候，無論結果爲resolved還是rejected，都會執行裏面的回調函數。

①.finally()方法不管Promise對象最後的狀態如何都會執行

②.finally()方法的回調函數不接受任何的參數，也就是說你在.finally()函數中是沒法知道Promise最終的狀態是resolved還是rejected的

③它最終返回的默認會是一個上一次的Promise對象值，不過如果拋出的是一個異常則返回異常的Promise對象。