Web API 是浏览器实现的一组非 ECMAScript 标准的全局接口，如 fetch、localStorage、document.querySelector、setTimeout、Geolocation 等，挂载于 window 或 navigator 上，开箱即用但受浏览器支持与权限策略约束。
JavaScript 中没有叫“Web API”的单一接口，它是一组浏览器提供的、通过 JavaScript 调用的内置功能集合，不是 ECMAScript 标准的一部分，而是由浏览器实现的。
哪些接口算 Web API？看是否挂载在 window 或 navigator 等全局对象上
真正属于 Web API 的，是那些你能在浏览器控制台里直接访问的对象和方法，比如：
-
fetch()、XMLHttpRequest（网络请求） -
localStorage、sessionStorage（客户端存储） -
document、Element、Node相关的 DOM 操作方法（如querySelector()、addEventListener()） -
setTimeout()、setInterval()（虽然语义上像 JS 原生，但实际由宿主环境提供） -
Geolocation（navigator.geolocation）、Notification、Clipboard（navigator.clipboard）等设备/系统级能力
它们共同特点是：不依赖第三方库，开箱即用，但行为受浏览器支持程度和权限策略（如 CORS、HTTPS 限制）约束。
fetch() 和 XMLHttpRequest 怎么选？别只看“新旧”
fetch() 更现代、基于 Promise，但默认不带 cookie，且 404 或 500 不会 reject —— 它只在网络失败时才抛错。而 XMLHttpRequest 更底层、可监听上传进度，适合大文件或需要精细控制的场景。
立即学习“Java免费学习笔记（深入）”；
- 要用 cookie：加
credentials: 'include'（fetch），或设withCredentials = true（XMLHttpRequest） - 要判断 HTTP 状态码是否成功：
if (!res.ok) throw new Error(res.status)，不能只靠catch - 上传进度监听：只有
XMLHttpRequest.upload.onprogress可靠；fetch需配合ReadableStream+TransformStream手动拆包，成本高
DOM 操作中哪些方法容易被当成“JS 原生”，其实是 Web API？
像 document.getElementById()、element.classList.add()、event.preventDefault() 这些都不是 JavaScript 引擎内置的，而是浏览器实现的 DOM 规范接口。这意味着：
- Node.js 环境里完全不可用（没
document） - 部分方法兼容性差：比如
element.replaceChildren()在旧版 Safari 不支持，得用innerHTML = ''+append()替代 -
querySelectorAll()返回的是NodeList，不是数组 —— 不能直接用map()，得先转：[...nodeList].map(...)或用Array.from(nodeList)
权限类 API（如 navigator.permissions）为什么常返回 prompt 而不是 granted？
浏览器对摄像头、位置、通知等敏感 API 实施渐进式授权策略。首次调用 navigator.permissions.query({ name: 'geolocation' }) 通常返回 state: 'prompt'，不代表拒绝，而是“还没问用户”。真正触发弹窗的是后续调用具体 API，比如 navigator.geolocation.getCurrentPosition()。
- 不要依赖
query()结果做逻辑分支，它只是状态快照 - 调用
getCurrentPosition()时必须处理error.code === 1（PERMISSION_DENIED）和error.code === 2（POSITION_UNAVAILABLE）等不同错误类型 - iOS Safari 对
Notification.requestPermission()有额外限制：必须由用户手势（如 click）触发，否则静默失败
Web API 的边界其实很模糊 —— 同一个函数，在 Chrome 里是标准实现，在 Node.js 里可能压根不存在，或者被 globalThis 上的另一个同名函数覆盖。用之前，先查 MDN 页面右上角的支持表格，比猜“应该有”靠谱得多。
