Question

我刚开始学习ReactJS。现在，我想知道在使用fetch发出API请求时如何处理响应状态。这是我的代码：

componentDidMount(){
    this.setState({ isLoading: true })
    var id = this.props.match.params.id        

    const api = `bla/bla/${id}`;

    console.log("start call api")
    fetch(api)
        .then((response) => {
            if(response.status === 200){
                console.log("SUCCESSS")
                return response.json();     
            }else if(response.status === 408){
                console.log("SOMETHING WENT WRONG")
                this.setState({ requestFailed: true })
            }
        })
        .then((data) => {
            this.setState({ isLoading: false, downlines: data.response })
            console.log("DATA STORED")
        })
        .catch((error) => {
            this.setState({ requestFailed: true })
        })
    console.log("end call api")
}

我关闭了我的连接以对408进行测试，但我的加载仍然显示。

render(){
     const { isLoading, requestFailed } = this.state;
      if(requestFailed){
        return( 
            <div className="errorContainer">
                <a className="errorMessage">Opss.. Something went wrong :(</a>
            </div>
        )
    }
}

这是我浏览器中的日志：

有任何解决此问题的想法吗？

Answer 1

根据MDN文档：

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

当遇到网络错误或服务器端的CORS配置错误时，fetch（）promise将拒绝TypeError，尽管这通常意味着权限问题或类似问题 - 例如，404不构成网络错误。准确检查成功的fetch（）将包括检查promise是否已解决，然后检查Response.ok属性的值是否为true。代码看起来像这样：

GetWorksTeste (){
        const {coWorks} = this.state;
            coWorks.map(function(cw){
                return (<li>{cw.name}</li>)
            })
        
    }

查看您的代码，我不认为您的408错误检查会一直运行。事实上我并不认为这样做。基本上上面的代码是在请求为200的情况下返回json响应，否则它会抛出错误。如果发生错误，那么你的第二个错误就永远不会运行，它会被抛到catch块。也许你可以设置isLoading：false吗？

您也可以记录api结束时的日志声明。在你的承诺完成之前被召唤。

Answer 2

当响应不正确时抛出错误，以便直接进入catch：

fetch(api)
  .then((response) => {
    if(!response.ok) throw new Error(response.status);
    else return response.json();
  })
  .then((data) => {
    this.setState({ isLoading: false, downlines: data.response });
    console.log("DATA STORED");
  })
  .catch((error) => {
    console.log('error: ' + error);
    this.setState({ requestFailed: true });
  });

Answer 3

如果要同时捕获响应的状态码和响应的正文，则可以使用此模式。对于我的项目，我创建了一个名为Endpoint的静态类来处理我的API调用。

export class Endpoint {

    static lastStatus = '';

    static Get = (url, OKCallback, errorCallback = null) => {
        fetch(url)
            .then(response => {
                Endpoint.lastStatus = response.status;
                return response.json();
            })
            .then(getResponse => {
                if (Endpoint.lastStatus == 200) {
                    OKCallback(getResponse.body);
                //} else if (Endpoint.lastStatus == 408) {
                //    Special logic or callback for status code 408 goes here.
                } else {
                    console.log("API Error: " + JSON.stringify(getResponse));
                    if (errorCallback != null) {
                        errorCallback(getResponse);
                    }
                }
            });
    }
}

如果要单独处理特定的HTTP状态代码（例如408），则可以在第二个“ then”块中添加自己的逻辑或回调来处理它们。

P.S。这种方法适用于我测试过的情况，但是我不确定这是最好的方法。邀请提供建设性反馈。

使用反馈JS

3 个答案: