如果状态码为 400 react js，如何在 fetch 中获取响应数据答案

【问题标题】：how to get response data in fetch if status code is 400 react js如果状态码为 400 react js，如何在 fetch 中获取响应数据
【发布时间】：2020-10-02 17:00:41
【问题描述】：

我正在从 api 端点获取数据。它需要用户名、电子邮件、密码、名字、姓氏并将其注册到数据库。现在，如果发生一些错误，例如已使用的电子邮件，那么它会给出 400 状态代码并发送此代码

{
    "err": "A user with the given email is already registered"
}

所以我想使用这个 api 端点。在 react js 中我正在这样做。

const printError=(err)=>{
    if((typeof(err)=='string'))
        return err
    else if(err.err!=undefined)
        return err.err
    else if(err.message!=undefined)
        return err.message
    else
        return 'Some error occured.Try Again later.'
}
fetch(BaseUrl+'users/signup',{
        method:'post',
        credentials:'include',
        body:JSON.stringify(user),
        headers:{
            'content-type':'application/json'
        }
    })
    .then(response=>{
        console.log(response)
        if(response.ok)
            return response.json()
        else{
            throw new Error(response)
        }
    })
    .then(response=>{
        alert(response.status)
    })
    .catch(error =>  { console.log('Registration error');console.log(error); alert('Registration Failed\nError: '+printError(error)); });

请告诉我在电子邮件已被占用时如何获取此 err 对象。

【问题讨论】：

标签： reactjs error-handling fetch

【解决方案1】：

很抱歉我自己提出并告诉了答案。如果 response.ok 为 false，则答案是 throw response.json()。

【讨论】：

【解决方案2】：

fetch 提供了一个简单的 ok 标志，指示 HTTP 响应的状态码是否在成功范围内。详情请参考以下链接：

https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful

.then(response=>{
        console.log(response)// this is response from server, including all ok and error responses 
        if(response.ok)
            return response.json()
        else{
            console.log(response) ///error message for server should be in this response object only
        }
    })

【讨论】：

通过这个 ok 标志，我知道我的响应不是成功的。但是响应正文中给出了原因，所以我如何访问它。在您提供的两个链接中都没有包含解决方案
来自服务器的错误应该只是响应（抛出新的错误（响应）），尝试类似.. response.statustext .... 控制台响应，如果它不正常，错误就在响应对象...
在 response.statustext 中它将包含错误的请求。但我想访问{err:"email already taken..."}。如果 fetch 无法做到这一点，请告诉我另一种方式。
检查服务器是否正在发送错误消息，响应对象应该有服务器发送的消息，控制台并尝试查看响应和它的嵌套对象，如resopnse.startusText，应该有更多信息只响应.