WebAPI是什么？常见JavaScriptAPI有哪些

你在学习文章相关的知识吗？本文《Web API是什么？常见JavaScript Web API有哪些》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Web API是浏览器提供的可被JS调用的接口集合，核心包括DOM（节点操作与事件绑定）、Fetch（网络请求需手动处理状态与凭证）、Storage（localStorage/sessionStorage/IndexedDB分工明确）、Geolocation与Clipboard（权限敏感，需检测上下文）。

DOM API：选元素、改内容、绑事件，90% 的页面交互都靠它

这是你每天写 JS 最先接触也最易踩坑的一层。核心不是“学多少方法”，而是理解「节点」和「实时性」。

• document.querySelector() 和 document.querySelectorAll() 是首选，但注意：前者只返回第一个匹配元素（null 时直接报错），后者返回的是「伪数组」（NodeList），不能直接用 map 或 forEach ——得先转成真数组：[...nodeList].forEach(...)
• innerText 只读文本，会忽略标签、折叠空白；innerHTML 读写 HTML 结构，但直接拼接字符串有 XSS 风险，动态插入内容优先用 textContent 或 createElement + appendChild
• 事件绑定别再用 onclick="..." 或 element.onclick = fn，一律用 element.addEventListener('click', handler)，否则无法解绑、不支持捕获阶段、多个监听器会被覆盖

Fetch API：取代 XMLHttpRequest 的现代网络请求方式

它默认不带 cookie，4xx/5xx 不抛错，JSON 解析要手动调用 response.json() —— 这三点是新手最常漏掉的。

• 发送带凭证的请求必须显式加 credentials: 'include'，否则跨域登录态丢失
• fetch() 只在网络错误（如断网、DNS 失败）时 reject，HTTP 状态码 404/500 仍走 then 分支，需手动判断：if (!response.ok) throw new Error(response.status)
• 上传文件用 FormData 对象即可，不用设 Content-Type 头（浏览器会自动加 boundary）

fetch('/api/user', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify({ name: 'Alice' }),
  headers: { 'Content-Type': 'application/json' }
})
  .then(r => r.json())
  .catch(err => console.error('网络或解析失败:', err));

Storage API：localStorage / sessionStorage / IndexedDB 的分工很明确

别把 localStorage 当数据库用。它只有字符串键值对、同步阻塞主线程、无事务、最大约 5–10MB，仅适合存用户偏好、主题色、临时 token。

• sessionStorage 页面关闭即清空，适合单次流程数据（如表单草稿、多步向导状态）
• 要存大量结构化数据（如离线消息、缓存图片元信息），必须上 IndexedDB —— 它是异步、支持索引、可存二进制，但 API 极其繁琐，建议用封装库如 idb
• 所有 Storage 写入都可能抛 QuotaExceededError，尤其在 iOS Safari 隐私模式下，务必包 try/catch

Geolocation & Clipboard API：权限敏感型 API，行为不可预测是常态

它们不报错，但经常「静默失败」：用户拒权、浏览器禁用、HTTPS 缺失、iframe 沙箱限制……调试时第一反应不该是代码错，而是检查上下文。

• navigator.geolocation.getCurrentPosition() 成功回调里才能拿到坐标，失败回调的 error.code 才是关键：1（用户拒权）、2（定位不可用）、3（超时）
• navigator.clipboard.writeText() 必须在用户手势触发的上下文中调用（比如 click 事件内），否则直接拒绝，且 Safari 目前仍需 document.execCommand('copy') 回退
• 这类 API 建议封装一层「能力检测 + 权限申请 + 错误映射」，避免业务逻辑里散落一堆条件判断

本篇关于《WebAPI是什么？常见JavaScriptAPI有哪些》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！