最现代、推荐的JavaScript网络请求方式是Fetch API。它基于Promise、语法简洁、取代XMLHttpRequest,支持GET/POST等方法,需手动检查response.ok处理HTTP错误,响应体用.json()等方法读取,支持credentials、cache、signal等配置项。

JavaScript 发送网络请求,最现代、推荐的方式是使用原生的 Fetch API。它基于 Promise,语法简洁,取代了老旧的 XMLHttpRequest,且被所有主流浏览器(包括 Edge 18+)良好支持。
基本用法:GET 请求获取数据
最常见的是发起一个 GET 请求,比如从 JSON 接口拉取用户列表:
- 调用 fetch(url) 返回一个 Promise,解析响应需链式调用 .then()
- 注意:fetch 默认只拒绝网络错误(如断网),404、500 等 HTTP 错误状态不会触发 catch,需手动检查 response.ok
- 响应体需用 response.json()、response.text() 等方法读取,它们也返回 Promise
示例:
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
发送 POST 请求并提交 JSON 数据
向服务器提交数据时,通常用 POST,并设置请求头和请求体:
立即学习“Java免费学习笔记(深入)”;
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
headers 中指定
'Content-Type': 'application/json' - body 需是字符串,用 JSON.stringify() 转换对象
- 可传入配置对象作为 fetch 的第二个参数:fetch(url, options)
示例:
const userData = { name: '张三', email: 'zhang@example.com' };
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(res => res.json())
.then(data => console.log('创建成功:', data));
处理请求配置与常见选项
fetch 支持多种配置项,实用的有:
- method:默认 GET,可设为 POST、PUT、DELETE 等
-
credentials:控制 Cookie 是否携带,常用
'include'(登录态必需)或'same-origin' -
cache:如
'no-cache'或'force-cache',避免意外缓存 - signal:配合 AbortController 实现请求取消(适合页面跳转或用户中止场景)
错误处理与健壮性建议
别只依赖 .catch()——它捕获不了 HTTP 错误,也不处理超时。建议:
- 始终检查 response.ok 或 response.status >= 200 && response.status
- 超时需手动实现(fetch 本身不支持 timeout 选项),可用 AbortController + setTimeout
- 对 JSON 解析失败(如返回 HTML 错误页)加 try/catch 包裹 response.json()
基本上就这些。Fetch API 不复杂但容易忽略细节,掌握好基础用法和错误边界,就能稳稳替代 jQuery.ajax 或手写 XHR。










