/

如何處理 Promise 的拒絕

如何處理 Promise 的拒絕

在過去幾年中，Promises 可說是 JavaScript 中最好的東西之一。

當我們調用一個返回 Promise 的函數時，我們可以使用 then() 方法來鏈接一個在 Promise 解析 時運行的函數。

以下是使用 Fetch API 的示例：

1
2
3
4
fetch('/data.json')
 .then(response => { 
 console.log(response.status)
 })

如果在 fetch() 調用期間出現錯誤該怎麼辦？可能是因為網絡不可用，或者網絡請求返回了錯誤。

Promise 將會被拒絕。一個 Promise 會像這樣：

1
2
3
const thePromise = new Promise((resolve, reject) => {

})

在 Promise 內部，我們會收到兩個參數，也就是兩個函數。在 Promise 主體內，如果一切正常，則會調用 resolve() 函數：

1
2
3
const thePromise = new Promise((resolve, reject) => {
 resolve('OK') // 你可以傳遞任何值
})

如果出現問題，則會調用 reject() 函數：

1
2
3
const thePromise = new Promise((resolve, reject) => {
 reject('錯誤訊息') // 你可以傳遞任何值
})

如果出現問題，我們必須處理 Promise 的拒絕。我們可以使用 Promise 的 catch() 方法來處理：

1
2
3
4
thePromise
 .catch(error => {
 console.error(error)
 })

我們必須始終使用 catch()，否則 Promise 將會默默地失敗。

我們可以將 catch() 鏈接到 then() 方法：

1
2
3
4
5
6
7
thePromise
 .then(response => { 
 console.log(response)
 })
 .catch(error => {
 console.error(error)
 })

甚至多個 catch() 方法，如果你有一系列的 Promise：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const thePromise = new Promise((resolve, reject) => {
 resolve({
 doSomething: function() {
 return new Promise((resolve, reject) => {
 reject('錯誤！') // 你可以傳遞任何值
 })
 }
 })
})

thePromise
 .then(response => { 
 return response.doSomething()
 })
 .then(response => { 
 console.log(response)
 })
 .catch(error => {
 console.log(error)
 })

在這種情況下，如果 thePromise 被拒絕，執行會直接跳到 catch() 方法。

你可以在兩個 then() 方法之間添加 catch() 方法，但當出現問題時，你將無法中斷鏈條。並且 catch() 的返回值（如果沒有指定，將為 undefined 值）將傳遞給後面的 then() 方法。

在我看來，最好的錯誤處理方式是使用 async/await，但有時我們無法避免使用 promises，因此這就是你可以做的方式。

tags: [“Promise”, “JavaScript”, “error handling”]