昨天有說到 Promise 的創建以及 then 的用法，今天我們來看錯誤處理。

then onRejected

我們昨天有提到說，then 兩個函式參數， onFulfilled 和 onRejected ，而onRejected 則是 Promise 物件狀態轉為 rejected 時呼叫。

不過在使用時要注意 Promise 是使用 split-callback（分離回呼）風格，所以如果我們這樣寫：

var promise = new Promise((resolve, reject) => {
   resolve(4)
})

promise
.then((val)=>{
    throw Error("error!!");
})
.then(null,(error)=>{
	console.log('err1',error.message);
	return "I'm reject return"
});

是沒有辦法順利接到錯誤的，會直接跳出瀏覽器的錯誤警告，
但這不是我們所希望的，所以我們必須這樣寫：

var promise = new Promise((resolve, reject) => {
   resolve(4)
})

promise
.then((val)=>{
    throw Error("error!!");
},(err)=>{
    console.log(err)
});

所以 Promise 的錯誤處理，很容易被無聲無息的吞掉。為了避免這個問題，通常我們都會在 Promise 串鍊的末端加上 catch()。

catch

catch 方法其實跟 then(undefined,onRejected) 方法一樣。兩者的區別在於，then(undefined,onRejected) 通常針對不同的錯誤處理作回覆，而 catch 通常對錯誤作統一的回覆。

const promise = new Promise((resolve, reject) => {
    resolve(4)
})

promise
.then((val) => {
    console.log(val) //4
    return val + 2
})
.then((val) => {
    console.log(val) //6
    throw new Error('error!')
})
.catch((error)=>{
	console.log('err',error)
})

等同於：

const promise = new Promise((resolve, reject) => {
    resolve(4)
})

promise
.then((val) => {
    console.log(val) //4
    return val + 2
})
.then((val) => {
    console.log(val) //6
    throw new Error('error!')
})
.then(null,(error)=>{
	console.log('err',error)
})

那如果我們同時寫，then(undefined,onRejected) 和 catch 會怎麼樣呢：

const promise = new Promise((resolve, reject) => {
    resolve(4)
});
promise
.then((val) => {
    console.log(val) //4
    throw Error('error!')
})
.then(null,(error)=>{
	console.log('err1',error.message);
	return "I'm reject return"
})
.catch((err) => {      
    console.log("err2",err.message);
	return "I'm catch return"
})
.then((val)=>{
	console.log(val);
},(error)=>{
	console.log('err1',error.message);
})
//4
// err1 error!
// I'm reject return

可以看到說是誰在前面就會先顯示。

以上就是 Promise 的錯誤處理，如果有錯誤及來源未附上也歡迎留言指正，那麼我們明天見。

參考資料 ：
你所不知道的 JS 非同步處理與效能
從Promise開始的JavaScript異步生活
MDN - Promise