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

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

以下是使用 Fetch API 的示例:

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

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

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

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

})

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

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

如果出現問題,則會調用 reject() 函數:

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

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

thePromise
 .catch(error => {
 console.error(error)
 })

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

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

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

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

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,因此這就是你可以做的方式。