javascript - 接口failed to fetch是什么场景？

Question

截图中两个都是请求失败的场景，从前端现象来看第二个失败前端拿不到接口的响应（then、catch都拿不到），导致页面一直处于loading状态无法关闭，两个fail的到response都是一样的，如下图

请问下第二种failed是什么异常场景？前端为啥没拿到响应？这种场景如何模拟出来呢？

Answer 1

failed to fetch 是一个常见的网络错误，通常表示浏览器在尝试发起网络请求时未能成功完成。这种错误可能由多种原因引起，包括但不限于：

1. 网络连接问题：用户的设备可能没有连接到互联网，或者网络连接不稳定。
2. CORS（跨源资源共享）策略：服务器可能配置了CORS策略，拒绝了来自当前源的请求。
3. 服务器问题：服务器可能由于各种原因（如过载、维护、崩溃等）未能响应请求。
4. 请求超时：请求可能因为网络延迟或服务器响应过慢而超时。
5. 请求被浏览器拦截：某些浏览器插件或设置可能会阻止特定的网络请求。

在您提供的场景中，第二种failed很可能是由于以下一种或多种原因导致的：

• CORS策略问题：如果服务器没有正确配置CORS以允许来自当前前端域的请求，浏览器将阻止请求，并且不会触发then或catch中的回调，因为这是一个安全策略级别的阻止，而不是一个可捕获的异常。
• 请求被浏览器拦截：类似于CORS问题，但可能是由于浏览器的安全设置或扩展导致的。
• 网络问题或服务器无响应：虽然这种情况也可能导致failed to fetch，但通常在这种情况下，catch块应该能够捕获到错误。

为什么前端没拿到响应？

如果是因为CORS或浏览器拦截导致的请求失败，这些错误是在浏览器层面被拦截的，因此不会触发JavaScript的then或catch。这意味着错误不会作为Promise的拒绝（rejection）传递，因此您无法在catch块中捕获到它。

如何模拟这种场景？

1. CORS模拟：您可以在服务器端配置CORS策略，以拒绝来自您的前端域的请求。这可以通过修改服务器的HTTP响应头来实现。
2. 网络模拟：使用浏览器的开发者工具（如Chrome的DevTools）来模拟网络问题，如离线状态或慢速网络连接。
3. 浏览器扩展：安装某些浏览器扩展（如CORS Unblock）来模拟CORS错误，但请注意，这主要用于开发和测试目的，并不推荐在生产环境中使用。
4. 服务器模拟：编写一个服务器端的模拟脚本，该脚本在接收到请求时不发送任何响应，以模拟服务器无响应的场景。

通过这些方法，您可以模拟出failed to fetch的场景，并观察前端如何响应这些错误。