Question

我正在尝试从API中获取一些数据并显示在我的应用中。因此，为了处理错误并获取数据，我使用了以下代码。

async componentDidMount() {
let data =  await fetch('https://demo61235421.mockable.io/getDfo')
.then((response) => response.json())
.then((responseJson) => {
  this.setState({
    totOrder : responseJson.totalOrders,
  })
})
.catch((error) => {
  console.error('error')
});
return data;
}

但是当我从API收到错误响应时，此代码不会在Simulator屏幕上显示错误。我不知道为什么，但是屏幕保持不变。

这是我的JSON响应，

{
   "error": "Error 445"
}

问题

为什么这不能捕获错误？我想念什么？
据我所知，由于JSON响应包含称为“错误”的ID，因此应该正在工作。我说得对吗？

更新

将代码更改为以下代码后，仍然不会显示错误。

async componentDidMount()
{
  try
  {
    let data =  await fetch('https://demo64533421.mockable.io/getDfo');
    let responseJson = await data.json();
    this.setState({
      Data : true,
      totOrder : responseJson.totalOrders,
    })
  }
  catch(error) 
  {
    console.error(error)
  }

}

此外，响应状态已设置为500 (Inernal Server Error)代码。

Answer 1

您正在使用异步/等待。您不需要“然后”和“抓住”。使用回调函数（然后/捕获）的目的是为了实现异步行为，其中“获取”将是异步的。但是，当您说“等待”时，它正在等待从提取中获取结果。

您应该这样做：

async componentDidMount() {
   try {
      let data =  await fetch('https://demo61235421.mockable.io/getDfo')
      // Do success scenarios here.
   }catch(err){
      // Perform error handling here
   }
}

Answer 2

对于获取API，根据我的经验，服务器返回的状态也很重要，如果它不是基于HTTP的错误状态代码（例如404、500），则可能不会引发错误。

React Fetch API方法中的本机捕获不起作用

2 个答案: