fetch() 未捕獲自定義錯誤消息

Question

我有以下 fetch() api 但 catch 塊無法正常工作。 我得到的錯誤信息是：

SyntaxError: Unexpected token < in JSON at position 0 undefined

但我期待的是：

something went wrong null

這是 api：

const getBtn = document.getElementById('get-btn')
const postBtn = document.getElementById('post-btn')


const sendHttpRequest = (method, url, data) => {
    return fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: data ? {'Content-Type': 'application/json'} : {}
    })
        .then(response => {
            console.log(response.status)
            if(response.status >= 400 || response == null){
                return response.json()
                    .then(errResData => {
                        const error = new Error('something went wrong')
                        error.data = errResData
                        throw error;
                    })
            }
            return response.json()
    })
}

const getData = () =>{
    sendHttpRequest('GET','http://localhost/async/fetch/data.jsonx')
        .then(responseData => {
            console.log(responseData)
        })
        .catch(err =>{
            console.log(err,err.data)
        })

}

const sendData = () =>{
    sendHttpRequest('POST','http://localhost/async/fetch/data.phpx',{
        email: 'someemail@gmail.com',
        password: 'compas'
    })
        .then(responseData => {
            console.log(responseData)
        })
        .catch(err => {
            console.log(err,err.data)
        })
}


getBtn.addEventListener('click',getData)
postBtn.addEventListener('click',sendData)

Answer 1

為了查看主體是否可解析為 JSON，您需要在.json上調用 .json。 這將返回一個 Promise ，它要么解析為解析值，要么由於正文不可解析而拋出。

如果它不可解析，連接到它的.then將不會運行； 如果正文不可解析， return response.json().then將不起作用，因此解釋器永遠不會到達new Error('something went wrong') 。

.then(response => {
    console.log(response.status)
    if(response.status >= 400 || response == null){
        return response.json()
            .then(errResData => {
                const error = new Error('something went wrong')
                error.data = errResData
                throw error;
            })
    }
    return response.json()

應該

.then(response => {
    console.log(response.status)
    if(response.status >= 400 || response == null){
        return response.json()
            .catch(errResData => {
                const error = new Error('something went wrong')
                error.data = errResData
                throw error;
            })
    }
    return response.json()

如果不可解析的響應將始終滿足條件response.status >= 400 || response == null response.status >= 400 || response == null 。

編輯代碼中.catch內的throw error將導致 Promise 拒絕，因此getData的.catch會看到錯誤。

Answer 2

如果你想從 Promise 捕獲錯誤，你應該使用.catch()而不是 .then( .then()