JavaScript fetch API 基础用法与实战案例
本文详解JavaScript中fetch API的基础用法，涵盖GET与POST请求的发送方式、URL参数传递、表单数据提交、响应数据类型处理（如JSON解析）以及Cookie凭据配置，通过具体代码案例帮助开发者快速掌握现代网络请求标准。
fetch API 概述与背景
在早期的 AJAX 开发阶段，执行 API 调用或其他网络请求通常依赖 XMLHttpRequest 对象或基于其封装的第三方库。
随后出现的 fetch API 旨在提供更强大且高效的网络请求能力。尽管目前部分旧版浏览器存在兼容性问题，但在 Hybrid App 开发场景（如前文提到的 Ionic 或 React Native 项目）中，fetch 均能实现完美的网络交互。
许多网络教程倾向于对比 XMLHttpRequest 与 fetch 的优劣，并罗列大量容易遗忘的理论内容。鉴于个人记忆特点及实际工作需求，本文仅聚焦于 fetch 的基础核心用法，以便日常查阅。
从本质上看，fetch 是 XMLHttpRequest 的一种替代方案。若有人询问除 Ajax 获取后台数据外是否有其他替代手段，这便是答案之一。
此时可以明确回答：除了使用 XMLHttpRequest 对象获取后台数据外，还可以采用更优的 fetch 解决方案。
GET 请求基础与参数传递
接下来通过具体案例展示 fetch 的实际应用。
首先演示如何使用 fetch 获取后端数据的基本流程。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
.then((res)=>{
return res.text() // res.text()是一个Promise对象
})
.then((res)=>{
console.log(res) // res是最终的结果
})在实现基础的 Hello World 示例后，重点转向 GET 请求的具体处理方式。
前文示例仅使用了 fetch 的第一个参数，实际上 fetch 支持第二个参数，用于传递初始化配置信息。
若需明确指定使用 GET 请求，应采用如下代码格式。
在 GET 请求中传递参数时，由于 GET 请求的特性，参数必须拼接在 URL 字符串中进行传输。
与 GET 请求类似，POST 请求的方法指定同样位于 fetch 的第二个配置参数中。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'GET'
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})POST 请求与表单提交配置
众所周知，POST 请求的参数严禁放置在 URL 中，此举旨在防止敏感信息泄露。
在 POST 提交过程中，通常涉及表单提交场景。经查阅，其默认提交方式对应的 Content-Type 为 text/plain;charset=UTF-8，这显然不符合常规表单提交标准。因此，需要学习如何手动指定请求头信息。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
method: 'GET'
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})配置完成后，在谷歌浏览器的 Network 面板中观察，可发现请求头中的 content-type 已变更为 application/x-www-form-urlencoded。
上述示例中返回的均为文本数据，实际上 fetch 还支持其他数据类型，具体可参考 Body 的类型文档。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'POST' // 指定是POST请求
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})鉴于 JSON 数据在日常开发中使用频率最高，此处简要演示获取 JSON 数据的具体方式。
默认情况下，fetch 不会自动发送或接收任何 Cookie。若网站依赖用户会话维持状态，这将导致未经认证的请求失败。如需发送 Cookie，必须显式配置凭据头（credentials）。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})以上内容由小编整理介绍，旨在帮助读者理解 JavaScript fetch 接口的应用案例。若有任何疑问，欢迎留言交流，小编将及时回复。感谢大家对本站的支持！
在POST提交过程中，通常采用表单提交方式。经查询，默认提交方式为Content-Type:text/plain;charset=UTF-8，这显然不合理。下文将学习如何指定头信息：
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
}),
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})此时，在谷歌浏览器的Network中查询，会发现请求方式已变为content-type:application/x-www-form-urlencoded。
JSON 数据获取与 Cookie 处理
通过接口获取JSON数据
上述所有示例均返回文本数据。除了文本，是否存在其他数据类型？答案是肯定的，具体查询地址为：Body的类型
鉴于JSON数据最为常用，下文将简要演示获取JSON数据的方式：
fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上传递的参数
method: 'GET',
headers: new Headers({
'Accept': 'application/json' // 通过头指定，获取的数据类型是JSON
})
})
.then((res)=>{
return res.json() // 返回一个Promise，可以解析成JSON
})
.then((res)=>{
console.log(res) // 获取JSON数据
})强制携带Cookie
默认情况下，fetch不会从服务端发送或接收任何cookies。若站点依赖维持用户会话，这将导致未经认证的请求（要发送cookies，必须发送凭据头）。
// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'GET',
credentials: 'include' // 强制加入凭据头
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})总结
以上所述是小编给大家介绍的JavaScript fetch接口案例解析，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38