HTML5Fetch获取JSON数据教程

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML5用Fetch获取JSON数据方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

HTML5中获取服务器数据主要用Fetch API和XMLHttpRequest：Fetch基于Promise，语法简洁，自动解析JSON；XHR需手动解析；均需处理CORS、嵌套JSON安全访问及错误响应。

如果您在HTML5页面中需要从服务器获取数据，通常会通过HTTP请求与后端API交互并解析返回的JSON格式响应。以下是使用Fetch API和XMLHttpRequest（Ajax）两种主流方式实现数据获取的具体步骤：

一、使用Fetch API请求JSON数据

Fetch API是HTML5推荐的现代异步请求接口，基于Promise设计，语法简洁且原生支持JSON解析。

1、在JavaScript中调用fetch()函数，传入目标接口URL作为参数。

2、使用then()方法处理响应对象，调用response.json()将响应体解析为JavaScript对象。

3、在第二个then()中接收已解析的JSON数据，并执行业务逻辑，例如更新DOM元素内容。

4、使用catch()捕获网络错误或解析异常，避免因请求失败导致脚本中断。

二、使用XMLHttpRequest发送Ajax请求获取JSON

XMLHttpRequest是较早的标准，兼容性更广，适用于需支持旧版浏览器的场景，需手动设置请求头并解析响应文本。

1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();

2、调用open()方法配置请求方式（如GET）、接口地址及是否异步。

3、设置onload事件处理器，在请求成功时检查xhr.status是否为200，并调用JSON.parse(xhr.responseText)解析JSON字符串。

4、调用send()方法发起请求。

5、设置onerror事件处理器以响应网络层错误。

三、处理跨域请求（CORS）问题

当请求域名、协议或端口与当前页面不一致时，浏览器会因同源策略拦截响应，需确保服务端正确设置Access-Control-Allow-Origin等响应头。

1、确认后端响应头中包含Access-Control-Allow-Origin: *或指定允许的源。

2、若需携带Cookie，前端fetch需添加credentials: 'include'选项，后端还需设置Access-Control-Allow-Credentials: true。

3、检查浏览器开发者工具Network面板中预检请求（OPTIONS）是否返回200及正确CORS头。

四、解析嵌套JSON结构并提取字段

服务器返回的JSON可能包含多层嵌套对象或数组，需安全访问深层属性以避免TypeError。

1、使用可选链操作符（?.）访问嵌套属性，例如data?.user?.profile?.name。

2、对数组类型响应，使用Array.isArray()校验后再调用map()或forEach()遍历。

3、使用typeof或=== null判断关键字段是否存在，避免直接访问undefined的属性。

五、错误响应体的JSON解析与提示

部分接口在出错时仍返回200状态码但响应体为错误JSON（如{ "code": 500, "msg": "服务器异常" }），需统一判断业务错误码而非仅依赖HTTP状态。

1、在fetch的then()中先检查response.ok是否为true，再调用response.json()。

2、解析后检查返回对象中是否存在code字段且值不等于200，视情况抛出自定义错误。

3、使用try...catch包裹JSON.parse()调用，防止非法JSON字符串导致解析失败。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~