Question

在我的react应用程序中，在进行api调用时，我想检查响应是否需要60秒以上才能达到，所以我应该显示一些错误消息-“请求超时”。

我在应用程序中使用axios进行http呼叫。

axios({
      method: "POST",
      url: 'http://localhost:8765/fetchData',
      timeout: 60*1000
      headers: {
        "Content-Type": "application/json"
      },
      data: requestData
    })
      .then(response => {
        if(condition1){
          history.push('/validated');
        }
        else if(somecondition2){
          history.push('/not-validated');
        }
      })
      .catch(function(error) {
        console.log(error);
      });

我根据axios文档在标头之前设置了超时时间，但是我不确定如何添加检查以显示错误消息以及如何验证此错误。

Answer 1

这是我处理超时的代码

...
this.state = {
 error:''
}
...
    axios.get('api/fetchData',{timeout:10}
                        )
                .then((res)=>{
        console.log(res)
    }).catch((e)=>{ 
        if(e.code == 'ECONNABORTED'){
            console.log('you can now handle time out here')
            this.setState({error:"Request Time out."})
        }
    })
...
return (
 <div>
   ...
   {this.state.errror?this.state.error:''}
   ...
 </div>
)
...

您的代码只需稍作更改即可完成操作。

axios({
      method: "POST",
      url: 'http://localhost:8765/fetchData',
      timeout: 60*1000
      headers: {
        "Content-Type": "application/json"
      },
      data: requestData
    })
      .then(response => {
        if(condition1){
          history.push('/validated');
        }
        else if(somecondition2){
          history.push('/not-validated');
        }
      })
      .catch(function(error) {
         if(error.code == 'ECONNABORTED'){
            console.log('you can now handle time out here')
            this.setState({error:'Request time out'})
        }
        console.log(error);
      });
...
return(
 <div>
   ...
   {this.state.error?this.state.error:''}
   ...
 </div>
)

我的超时值为10毫秒，因为我在本地服务器上运行它。
希望有帮助

如果API响应时间较长，则在UI中显示超时错误

1 个答案: