Question

我正以这种方式从API中获取数据，如果用户搜索的城市无效但无法正常工作，我试图捕获404错误。

const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
        }).catch(() => console.log("error"));
    }
  }

console

Answer 1

请参阅文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

从fetch()返回的承诺不会拒绝HTTP错误状态，即使响应是HTTP 404或500，也可以正常解析（使用{{1} }状态设置为false），并且只会在网络出现故障或任何导致请求无法完成的情况下拒绝。

您必须使用ok提供的响应参数，并检查.then(response => {...})或response.ok以获得404（或500）错误。

Answer 2

您的代码运行良好，如您所见：

    const search = evt => {
        if (evt.key === "Enter") {
          fetch('http://dfsdfsdfdsfsdfdfs.com')
            .then(res => res.json())
            .catch(() => console.log("error"));
        }
      }

      search({key : 'Enter'});

但是来自服务器的错误代码不会被视为fetch的错误，因此您必须自己解析响应并做出相应的反应。您可以使用res.ok，如果状态代码在200-299范围内，则将返回true。有关更多信息，您可以查看Response对象文档

Answer 3

如docs所述，由于fetch不会捕获404或500状态，因此您可以通过引发错误并捕获来模仿行为catch部分。

fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then((response) => {
    if(response.status == 404){
        throw '404 page not found';
    }
    return response.json();
})
.then((response) => {
    console.log('your JSON string ',response);
})
.catch((err) => {
    console.error(err);
});

Answer 4

我能够以这种方式得到错误：

const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
        }).then((data) => {
          if (data === undefined) {
            alert("City not found");
          }
        });
    }
  }

JS Promises-catch（）不返回任何内容

4 个答案: