掌握 fetch api 关键是理解其两阶段响应模型：promise 在响应头到达时即 resolve，需用 response.json() 等方法获取响应体；404/500 不触发 catch，须手动检查 response.ok；get 用 urlsearchparams 处理参数更安全；post 发送 json 要设置 content-type 并 stringify，发 formdata 则无需手动设头；建议封装带错误处理和自动解析的函数，后续可拓展并发、上传进度、认证与离线支持。
掌握 fetch API 不需要死记硬背，关键是理解它的两阶段响应模型和常见使用模式。从能发一个请求，到能稳定处理各种接口场景，可以按这几个实用方向推进。
先搞懂核心机制：两阶段响应
fetch 返回的 Promise 在响应头到达时就 resolve，不是等完整数据下载完。这意味着：
- 你可以立刻检查
response.status和response.ok判断 HTTP 是否成功（200–299 才是 ok） - 但此时还拿不到响应体，必须调用
response.json()、response.text()等方法——它们也返回 Promise - 404、500 这类状态码不会让 fetch 报错，只影响
response.ok，得自己判断处理 - 真正的错误（如网络断开、跨域被拒、DNS 失败）才会触发
catch
从 GET 开始，带参数也要规范
基础 GET 很简单，但带查询参数别手拼字符串：
- 小量参数可用模板字面量：
fetch(`https://api.com/users?id=${id}&sort=desc`) - 参数多或含特殊字符，用
URLSearchParams更安全：fetch(`/users?${new URLSearchParams({page: 2, limit: 10})}`) - 记得检查
response.ok再解析数据，避免对 404 响应调用.json()出错
POST 和请求体要分清类型
发送数据的关键是匹配 Content-Type 和 body 格式：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 发 JSON：设置
headers: {'Content-Type': 'application/json'}，body: JSON.stringify(data) - 发表单：直接传
FormData实例，浏览器自动设好Content-Type和边界，不用手动写 - 传文件：用
FormData.append('file', input.files[0])，和表单提交一致 - 不要对
FormData再加Content-Type头，会出错
封装一个够用的小函数，别一上来就抄 axios
写个带基础错误处理和 JSON 自动解析的封装，比每次重复写 try/catch 清爽得多：
- 统一处理
!response.ok的情况，抛出自定义错误 - 默认调用
response.json()，同时保留response.text()或response.blob()的入口 - 加个简单的 loading 状态或超时控制（用
AbortController）就能应付大多数项目初期需求
后续可拓展的方向
熟练之后再考虑这些：
- 并发请求：用
Promise.all([fetch(a), fetch(b)])拉多个用户或资源 - 上传进度：配合
ReadableStream或第三方库监听二进制上传过程 - 认证与凭证：通过
credentials: 'include'发送 Cookie，或在 headers 加Authorization - 离线支持：结合
cache: 'force-cache'或 Service Worker 缓存策略
不复杂但容易忽略
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
