如何处理网络请求失败错误？

Posted 2023-02-22

【中文标题】如何处理网络请求失败错误？

【英文标题】：how to handle network request failed error?

【发布时间】：2019-07-06 01:36:25

【问题描述】：

我的问题与React Native fetch() Network Request Failed 不同，我不是在为 http 或 https 苦苦挣扎，我只是想在请求因 Internet 连接、错误 API 等而失败时向用户提供一个很好的错误。而不是反应原生错误。

我有一个表单，想将它发送到服务器并得到响应，所以我写了这个：

submitForm = async () => 
  fetch("www.somewhere.com", 
    method: 'POST',
    headers: 
      'Content-Type': 'application/json',
    ,
    body: JSON.stringify(some_data)
  )
  .then((response) => response.json())
  .then((responseJson) => 
     // do something
  )
  .catch((error) => 
      this.setState(server_error: "request failed try again.");
  );
;

但我的 catch 似乎无法正常工作，因为如果请求失败，我会从 react native 得到一个错误，如下所示： 而在生产中，它只是跳出应用程序，我该如何避免这种情况？

【参考方案1】：

不知道这是否能解决您的问题，但您的提取代码会尝试创建 JSON，即使响应是 404，例如。

还需要在创建 JSON 之前检查响应是否正常

submitForm = async () => 
  fetch("www.somewhere.com", 
    method: 'POST',
    headers: 
      'Content-Type': 'application/json',
    ,
    body: JSON.stringify(some_data)
  )
  .then((response) => 
        if(response.statusText == "OK" && response.status >= 200 && response.status < 300) 
            return response.json()
         else 
            throw new Error("Server can't be reached!")
        
    )
  .then((json) => 
     console.log("hooray! we have json!")
     console.log(json)
  )
  .catch((error) => 
      console.log("error fetching data")
      console.log(error)
      console.log(error.message) // Server can't be reached!
      this.setState(server_error: "request failed try again.");
  );
;

【讨论】：

所以 fetch().catch() 本质上是“我无法完成这个请求”但不提供除此之外的信息吗？因为我的想法是如果 response.json() 失败它仍然可以捕获。

是的，您可以记录错误，catch(error => console.log(error.message))。但是 catch 只捕获实际错误，例如，如果互联网关闭或 url 不存在。 404 不被视为错误，因为服务器仍会返回信息。但是，如果您收到404，您可以抛出自己的错误！我会编辑答案！