JS Promises - catch() 不返回任何东西

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")); } }

安慰

Answer 1

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

即使响应是 HTTP 404 或 500，从fetch()返回的 Promise也不会拒绝 HTTP 错误状态。相反，它会正常解决（ ok状态设置为 false），并且只会在网络故障或如果有任何阻止请求完成。

您必须使用.then(response => {...})提供的响应参数并检查response.ok或response.status以获得 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错误，因此您必须自己解析响应并做出相应的反应。 如果状态代码在 200-299 范围内，您可以使用res.ok返回 true。 有关更多信息，您可以查看响应对象文档

Answer 3

正如docs ，由于fetch不会对404或500状态进行捕获，因此您可以通过抛出错误并在catch部分进行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"); } }); } }