Javascript 获取API、Chrome和404错误

我正在玩

获取

，我注意到当我获取的资源不存在时，只有Chrome才会显示错误（又称404）：

Edge和Firefox都没有这样做，使用fetch的404错误似乎不会触发NetworkError来通知我的捕获错误处理程序我应该如何避免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

您可以尝试传递函数，当承诺被拒绝时调用该函数。您可以通过在

中传递第二个函数，然后

---

您可以尝试自己处理错误，并实际触发一个

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

只有当我正在获取的资源不存在时，Chrome才会显示错误 存在（又名a 404）

我认为这是Firefox、Chrome和Safari中的一个错误

我正在使用的代码 我试着用下面的运行来复制您所说的内容。没有“data.json”文件

index.html 开发工具截图 铬

火狐

游猎

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

---

您不能强制客户端使用自己的代码看不到这些错误，但用户可以通过更改自己的浏览器设置来选择不显示错误。请参阅。

我想与大家分享这个代码片段，以展示在通过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>

让url=”https://jsonplaceholder.typicode.com/todos/1";
fetchApi（url）；
函数句柄数据（数据）{
console.log（'successfull:'，data）
}
函数fetchApi（url）{
获取（url）
.then（response=>response.ok？response.json（）：Promise.reject（{err:response.status}））
.然后（数据=>handleData（数据））
.catch（错误=>console.log（'请求失败：'，错误））；
}

服务器上什么都没有，因此服务器会向所有客户端发送404响应。但是您更希望浏览器devtools不显示404，尽管这是服务器响应中的实际状态？如果这只发生在devtools中，那么这是完全正确的。该文件不存在是故意的。显示为错误的404似乎有点奇怪。只要最终用户没有看到错误，那么我就不太担心。不回答控制台日志错误的问题

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

<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>