在過去幾年中,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,因此這就是你可以做的方式。