Question

我正在玩fetch，我注意到当我提取的资源不存在时，只有Chrome显示错误（也称为404）：

Edge和Firefox都没有这样做，使用fetch的404错误似乎没有触发NetworkError让我的catch错误处理程序得到通知。 我应该怎么做才能避免Chrome中出现此错误？

如果您需要，我的完整代码如下：

fetch("https://www.kirupa.com/book/images/learning_react2.gif", {
    method: "head",
    mode: "no-cors"
})
.then(function(response) {
    if (response.status == 200) {
        console.log("file exists!");
    } else {
        console.log("file doesn't exist!");
    }
    return response.text();
})
.catch(function(error) {
  console.log("Error ", error);
});

谢谢， Kirupa

Answer 1

您可以尝试自己处理错误并实际触发Promise.reject()。像这样的东西

fetch("https://httpstat.us/500", {
    method: "head",
    mode: "no-cors"
})
.then(status)
.then(res => res.json())
.catch(function(error) {
    console.log("Error", error);
});

function status(response) {   
    if (response.ok) {
        return response;
    }
    return response.json().then(res => Promise.reject(res));
}

Answer 2

当我提取的资源没有时，Chrome才会显示错误存在（又名404）

我认为这是Firefox，Chrome和Safari中的错误。

代码我正在使用

我尝试使用以下http-server运行来复制您所说的内容。没有“data.json”文件。

的index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Async Test</title>
    <script src="index.js"></script>
</head>

<body>
    <main>
        <h1>Async Test</h1>
    </main>
</body>

</html>

index.js

(async function() {
  let a;
  try {
    a = await fetch("./data.json", {
      method: "head"
    });
    console.log("No error");
  } catch (err) {
    console.log("Caught an error");
  }
  console.log(a);
}());

(function() {
  fetch("./data.json", {
      method: "head"
    })
    .then(data => {
      console.log("No error");
      console.log(data);
    })
    .catch(err => {
      console.log("Caught an error");
    });
}());

开发工具截图

铬

火狐

Safari浏览器

分析

浏览器知道资源是否存在的唯一方法是实际发出网络请求。 Chrome始终记录网络请求错误，例如 404 。这就是为什么当你访问的网站没有赞成时，你可能会看到很多关于favicons的错误。

您无法强制您的客户端使用您自己的代码看不到它们，但是用户可以通过更改自己的浏览器设置来选择让错误显示给他们。请参阅this answer to Suppress Chrome 'Failed to load resource' messages in console。

Answer 3

您可以尝试在拒绝承诺时调用的传递函数。您可以通过在then

中传递第二个函数来实现

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 4

我想分享此代码段，以展示在通过API提取信息时使用诺言链的另一种方法。

<script>
let url = "https://jsonplaceholder.typicode.com/todos/1";

fetchApi(url);

function handleData(data){
  console.log('succesfull:', data)
}

function fetchApi(url){
  fetch(url)
    .then(response => response.ok ? response.json() : Promise.reject({err: response.status}))
    .then(data => handleData(data))
    .catch(error => console.log('Request Failed:', error));
}

</script>

获取API，Chrome和404错误

4 个答案:

代码我正在使用

的index.html

index.js

开发工具截图

铬

火狐

Safari浏览器

分析