Fetch API 是浏览器内置的现代网络请求接口,基于 Promise,支持 async/await;GET/POST 请求需手动处理 HTTP 错误和 JSON 解析,注意 credentials、超时及进度等限制。

Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口,它比传统的 XMLHttpRequest 更简洁、更强大,基于 Promise,天然支持 async/await。
基本用法:发起一个 GET 请求
最简单的 fetch 调用只需要传入一个 URL 字符串:
fetch('https://api.example.com/data')<br> .then(response => response.json())<br> .then(data => console.log(data))<br> .catch(error => console.error('请求失败:', error));登录后复制
- fetch 返回一个 Promise,代表响应的未来值
- 注意:fetch 只在发生网络错误(如断网)时 reject;HTTP 状态码如 404、500 不会触发 catch,需手动检查 response.ok 或 response.status
- response.json() 也返回 Promise,要等它解析完才能拿到真正的数据
发送 POST 请求并携带 JSON 数据
需要配置 options 对象,指定 method、headers 和 body:
const data = { username: 'alice', password: '123' };<br><br>fetch('https://api.example.com/login', {<br> method: 'POST',<br> headers: {<br> 'Content-Type': 'application/json'<br> },<br> body: JSON.stringify(data)<br>})<br>.then(res => {<br> if (!res.ok) throw new Error(`HTTP ${res.status}`);<br> return res.json();<br>})<br>.then(json => console.log(json))<br>.catch(err => console.error(err));登录后复制
- body 必须是字符串、Blob、FormData 等可序列化类型;JSON 需先用 JSON.stringify()
- 手动检查 res.ok(等价于 status 在 200–299 区间),避免把服务端错误当成功处理
- 设置 Content-Type 头让后端知道你发的是 JSON
使用 async/await 让代码更清晰
配合 async 函数,可以写出接近同步风格的请求逻辑:
标签: javascript word java js 前端 json cookie 浏览器 app axios 后端 ai i
还木有评论哦,快来抢沙发吧~