JS fetch TypeError: Failed To Fetch

Question

每当我尝试获取数据时，返回一个错误 "TypeError:failed to fetch"，其他解决方案对我无效。以下是我的代码：

fetch(url)
  .then((resp) => resp.json())
  .then((data) => {
     this.JSONData = data;
  })
  .then(() => {
     this.search()
  }) 
  .catch(error => {
     alert(error);
  });

- Riven

---

这是一个CORS请求吗？ - hellojeffhall

你是否正在尝试使用 file: 协议请求资源？ - guest271314

服务器请求日志记录了什么？ - guest271314

正在使用哪个服务器？服务器上应该记录不止“类型错误”。resp.status 记录了什么？只有在发生网络错误时，fetch() 才会到达 .catch()。您的服务器是否处于活动状态并接受请求？您是否请求了正确的 URL？您能否在问题文本中包含服务器类型和配置？ - guest271314

@guest271314 谢谢，顺便说一下 - Riven

Answer 1

这个页面在异步处理完成之前是否会重新加载？这可能会发生在某些不返回false的回调函数中。

在您的代码中，由于resp.json()是异步的，因此包含该fetch的函数将在fetch完成之前返回，但它将有足够的时间来启动fetch。例如，如果这是在“onSubmit”中，如果函数返回一个非false值，则页面将重新加载，从而打断您的fetch。当遇到第一个then时（也是异步的），它会出错。

为了修复问题，

<form onsubmit="myFunctionWithFetch(); return false;">
... or return false in your function and do ...
<form onsubmit="return myFunctionWithFetch();">

- cwingrav

---

这对我来说是一个缺失的解决方案！ - paulywill

添加 function handleClick() 函数。 - paulywill

Answer 2

如果您正在使用Swagger并且有广告拦截器，请确保禁用广告拦截器。我在测试我的ASP.NET Core网站时遇到了这个问题，使用Swashbuckle一直无法成功。为我的开发网站禁用广告拦截器后，它开始正常工作。希望这可以帮到您！

- Auri Rahimzadeh

Answer 3

在解析响应为JSON之前，您可以检查响应的HTTP状态：

fetch("https://example.com/page-not-found")
  .then(resp => resp.status === 200 ? resp.json() : alert(resp.status))
  .then(/*...*/)
  .catch(error => alert(error));

200 是 HTTP 状态码，表示OK。

当然，alert() 只是用于调试/开发目的。

- Syscall