最常用的是 fetch() api,它简洁、原生支持、返回 promise;默认为 get 方法,需手动检查 response.ok 判断 404/500 等 http 错误,用 urlsearchparams 拼接查询参数更安全,get 不允许带 body,旧浏览器需 polyfill 或 xmlhttprequest。

用 JavaScript 发送 GET 请求获取后端数据,最常用的是 fetch() API,它简洁、原生支持、返回 Promise,适合现代浏览器。传统方式如 XMLHttpRequest 也能用,但代码更冗长,现在基本不推荐新项目使用。
用 fetch() 发送简单 GET 请求
fetch() 默认就是 GET 方法,直接传入 URL 即可。注意它只在 HTTP 状态码为 2xx 时算“成功”,404 或 500 不会抛错,需手动检查 response.ok。
- 基本写法:
fetch('/api/users')发起请求 - 链式处理:用
.then(response => response.json())解析 JSON 数据 - 错误处理:用
catch()捕获网络异常;用if (!response.ok)判断业务错误(如 404)
带查询参数的 GET 请求
URL 中的查询参数(query string)要手动拼接或用 URLSearchParams 构造,避免手动拼接出错(比如编码问题)。
- 推荐方式:用
URLSearchParams生成参数字符串,再拼到 URL 后 - 示例:
const params = new URLSearchParams({ id: 123, name: '张三' }); fetch(`/api/user?${params}`) - 中文或特殊字符会被自动编码,比手拼
?id=123&name=%E5%BC%A0%E4%B8%89更安全可靠
设置请求头(如认证 token)
某些接口需要在请求头中携带认证信息(如 Bearer Token),这时需配置 headers 选项。
- 通过
fetch(url, { headers: { 'Authorization': 'Bearer xxx' } })添加请求头 - 若后端要求
Content-Type,GET 请求通常不需要设,但若接口文档明确要求,也可加上 - 注意:GET 请求不能带请求体(
body),所有参数必须放在 URL 中
兼容旧浏览器(如 IE)怎么办
如果必须支持 IE11 或更老版本,fetch() 不可用,得回退到 XMLHttpRequest。
- 创建实例:
const xhr = new XMLHttpRequest() - 配置并发送:
xhr.open('GET', '/api/data'); xhr.send() - 监听响应:
xhr.onload = () => { if (xhr.status === 200) console.log(JSON.parse(xhr.responseText)) } - 建议配合 polyfill(如 whatwg-fetch)或直接用成熟的请求库(如 axios)简化兼容性处理
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











