JavaScript调用第三方API的核心是掌握fetch/XHR的边界与容错逻辑，关键在处理跨域、认证、响应结构误判；需配代理绕CORS、安全传Token、手动校验response.ok、防御性解析响应数据。
JavaScript 调用第三方 API 的核心不是“学教程”，而是掌握 fetch 或 XMLHttpRequest 的实际边界和容错逻辑——绝大多数失败都出在跨域、认证、响应结构误判上。
为什么 fetch 请求突然被浏览器拦截？
这不是代码写错了，而是浏览器执行了 CORS 策略：目标 API 没在响应头里返回 Access-Control-Allow-Origin，或你没配代理绕过限制。
- 开发时用 Vite/webpack dev server 配
proxy（比如把/api代理到https://api.example.com），前端请求走/api/users，避免跨域 - 生产环境必须确认该 API 明确支持前端直连（很多服务如 Stripe、Plaid 只允许后端调用）
- 别信“加个
mode: 'no-cors'就行”——这会让响应变成 opaque，你读不到任何数据
如何安全传 Authorization 头？
前端暴露 token 是常态，但得控制粒度：用 Bearer Token 时，token 必须由后端下发，且有效期要短；绝不能把 API key 硬编码在 JS 里。
- 从后端接口获取临时 token：
await fetch('/auth/token', { method: 'POST' }) - 请求时带上：
headers: { 'Authorization': 'Bearer ' + token } - 如果 API 要
API-Key，检查文档是否允许前端使用——多数情况不允许，需后端中转
fetch 返回的 Promise 为什么没进 catch 却拿不到数据？
fetch 只在网络错误（如断网、DNS 失败）时 reject；HTTP 错误状态码（404、500）仍会 resolve，必须手动检查 response.ok 或 response.status。
立即学习“Java免费学习笔记（深入）”；
fetch('https://api.example.com/data')
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err.message));
-
r.json()本身也可能 reject（比如返回了 HTML 错误页却强行解析 JSON） - 建议统一包装一层工具函数，自动处理 status、content-type、timeout
- 别依赖
try/catch包整个fetch——它捕不到网络层失败
第三方 API 响应结构总变，怎么减少前端崩掉？
不假设字段一定存在，尤其嵌套对象或数组。用可选链 ?. 和空值合并 ?? 是基础，但更要提前约定降级策略。
- 取用户头像：
user?.profile?.avatar_url ?? '/default-avatar.png' - 列表渲染前加
Array.isArray(data.items) && data.items.length判断 - 关键字段缺失时，记录日志（
console.warn）而非静默失败，方便快速发现接口变更
真正麻烦的从来不是“怎么发请求”，而是当 API 文档没写清字段含义、字段可能为空、字段类型偶尔变化、服务端突然加了限流头时，你的代码有没有兜底能力。
