理解并解决前端 Fetch API 的 Failed to fetch 错误
最近在学前端开发时，经常遇到一个让人头疼的错误提示：TypeError: Failed to fetch。刚开始完全摸不着头脑，经过一番摸索后，终于搞清楚了它的来龙去脉。本文将用最直白的语言，分享这个错误的原因和解决方法。
为什么会出现 'Failed to fetch' 错误
简单来说，这个错误发生在浏览器尝试通过网络获取资源（比如数据、文件等）但失败时。就像你点外卖却联系不上餐厅，fetch就是那个送餐员，当它无法完成任务时就会抛出这个错误。
常见原因包括：
- 网络连接问题：设备断网，或者目标服务器宕机。
- 跨域限制 (CORS)：浏览器出于安全考虑，不允许随意访问其他域名的资源，除非对方明确允许。
- URL 错误：请求地址写错了，例如协议（http/https）、域名或路径不正确。
- 服务器问题：目标服务器暂时不可用或拒绝了请求。
排查和解决问题步骤
遇到这个错误时，可以按照以下步骤进行排查：
- 检查网络连接：确认设备能正常上网，尝试访问其他网站测试。
- 验证 API 地址：仔细检查请求地址是否正确，包括协议、域名和路径。
- 查看控制台错误详情：打开浏览器开发者工具（按 F12），在 Console 或 Network 标签页查看更详细的错误信息。
- 处理跨域问题：如果是跨域请求，确保服务器设置了正确的 CORS 头，或者考虑使用代理。
- 添加错误处理：在
fetch请求中加入catch块来优雅地处理错误，给用户友好提示。
代码示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
