Javascript 在React中注册用户帐户时使用window.location

我正在使用此代码注册用户：

register = event => {
        console.log(this.state.credentials);
        fetch('http://api.herokuapp.com/account/users/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(this.state.credentials)
        }) .then(res => {
            window.location.href = '/'
        })
            .catch(error => console.log(error))
            alert("Invalid information, please reenter your details correctly")
            window.location.href = '/Oko/RegisterUser'
    }

它工作正常，我可以注册用户。但是，如果用户帐户已注册，我想将window.location.href更改为/。如果未注册，并且出现错误console.logerror，我想将window.location.href更改为/Oko/RegisterUser，这是他们已经在的网页。 当前，当调用register时，无论是否存在错误，它都会向/发送用户。 如果出现错误，是否有办法让用户保持在RegisterUser页面上

当遇到网络错误或服务器端的CORS配置错误时，fetch承诺将以TypeError拒绝

您需要使用res.ok来检查HTTP错误

register = event => {
    console.log(this.state.credentials);
    fetch('http://api.herokuapp.com/account/users/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.state.credentials)
    }) .then(res => {
        if(res.ok) {
          window.location.href = '/'
        } else {
            alert("Invalid information, please reenter your details correctly")
            window.location.href = '/Oko/RegisterUser'
        }
    })
        .catch(error => console.log(error))

}

当遇到网络错误或服务器端的CORS配置错误时，fetch承诺将以TypeError拒绝

您需要使用res.ok来检查HTTP错误

register = event => {
    console.log(this.state.credentials);
    fetch('http://api.herokuapp.com/account/users/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.state.credentials)
    }) .then(res => {
        if(res.ok) {
          window.location.href = '/'
        } else {
            alert("Invalid information, please reenter your details correctly")
            window.location.href = '/Oko/RegisterUser'
        }
    })
        .catch(error => console.log(error))

}

---

您的请求总是在.then块中执行代码，因为如果收到HTTP错误代码，提取不会失败

从MDN文档：

从fetch返回的承诺不会在HTTP错误状态下拒绝 即使响应是HTTP 404或500。相反，它会解决问题 正常情况下，ok（正常）状态设置为false（假），并且仅在 网络故障或任何阻止请求完成的情况

如文档所述，您需要检查中响应对象的属性ok。然后阻止：

register = event => {
    fetch('http://api.herokuapp.com/account/users/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.state.credentials)
    }) .then(res => {
        if(res.ok) {
            window.location.href = '/'
        }else{
            alert("Invalid information, please reenter your details correctly")
            window.location.href = '/Oko/RegisterUser'
        }
    }).catch(error => console.log(error))
}

---

您的请求总是在.then块中执行代码，因为如果收到HTTP错误代码，提取不会失败

从MDN文档：

从fetch返回的承诺不会在HTTP错误状态下拒绝 即使响应是HTTP 404或500。相反，它会解决问题 正常情况下，ok（正常）状态设置为false（假），并且仅在 网络故障或任何阻止请求完成的情况

如文档所述，您需要检查中响应对象的属性ok。然后阻止：

register = event => {
    fetch('http://api.herokuapp.com/account/users/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.state.credentials)
    }) .then(res => {
        if(res.ok) {
            window.location.href = '/'
        }else{
            alert("Invalid information, please reenter your details correctly")
            window.location.href = '/Oko/RegisterUser'
        }
    }).catch(error => console.log(error))
}