JavaScriptWebAPI有哪些？新手入门指南

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript Web API有哪些？新手教程》，聊聊，希望可以帮助到正在努力赚钱的你。

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 更底层、可监听上传进度，适合大文件或需要精细控制的场景。

• 要用 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 页面右上角的支持表格，比猜“应该有”靠谱得多。

今天关于《JavaScriptWebAPI有哪些？新手入门指南》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！