即使发生错误，也要尝试捕获不起作用

Question

我有一些代码在提交表单时执行。它发布到API路由。

  handleSubmit = async () => {
    try {
      const response = await fetch(`${API_URL}/project`, {
        method: "post",
        body: JSON.stringify({
          name: this.state.name,
          description: this.state.description
        }),
        headers: { "Content-Type": "application/json" }
      });
      return response ? response.json() : response;
    } catch (error) {
       console.log(error)
    }
  };

问题是在测试时我将API路由更改为故意无效的路由以导致错误。然而，捕获代码没有被击中。我是否设置了try-catch错误？

Answer 1

您面临的问题是接收404不是例外。要处理这个问题，你应该添加一些代码来检查响应的状态代码，然后从那里确定应该做什么。例如，您将收到响应并使用以下内容：

if(response.status == 404)
    //Code for not receiving the content you expect

问题是你可能会收到很多潜在的反应，而这些反应并不是你想要的，所以我实际上建议将特定的响应范围列入白名单，而不是寻找有问题的反应范围。例如

if(response.status >= 200 && response.status <= 299)
    //Code to run when you receieve a good response

这是一个示例，您可以自行决定要处理的响应。

Answer 2

fetch仅在发出或接收响应时出错。 HTTP 404应被视为“成功”响应，并由用户决定如何处理此类响应。

如果您想要拒绝非20x响应并且您已经有一个业务逻辑来处理catch代码上的错误，您可以抛出一个新错误并将其与另一个错误一起处理：

try {
    const response = await fetch(`${API_URL}/project`, {
    ...
    if (response.status >= 200 && response.status < 300) {
        return response.json()
    } else {
        var error = new Error(response.statusText || response.status)
        error.response = response
        throw(error)
    }
} catch (error) {
   console.log(error)
}

Answer 3

如果您需要获取特定错误，您必须遵循以下方式：

handleSubmit = () => {
    fetch(`${API_URL}/project`, {
        method: "post",
        body: JSON.stringify({
            name: this.state.name,
            description: this.state.description
        }),
        headers: { "Content-Type": "application/json" }
    }).then((response) => {
        return response ? response.json() : response;
    }).catch((error) => {
        console.log(`fetch specific error: ${error}`)
    });
};