fetch() 未捕获自定义错误消息

问题描述

我有以下 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: '[email protected]',password: 'compas'
    })
        .then(responseData => {
            console.log(responseData)
        })
        .catch(err => {
            console.log(err,err.data)
        })
}


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

解决方法

为了查看主体是否可解析为 JSON，您需要在 Promise 上调用 .json。这将返回一个 Promise，该 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。

编辑后的代码中 throw error 中的 .catch 将导致 Promise 拒绝，因此 getData 的 .catch 将看到错误。

,

如果您想从 Promise 中捕获错误，您应该使用 .catch() 而不是 .then()