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免费学习笔记(深入)”;
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
- 要用 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 页面右上角的支持表格,比猜“应该有”靠谱得多。










