必须借助JavaScript发起异步请求调用API，方法包括：一、fetch API；二、XMLHttpRequest；三、async/await封装fetch；四、JSONP跨域；五、Axios库。
如果您在HTML页面中需要从服务器获取动态数据，但页面无法直接执行后端逻辑，则必须借助JavaScript发起异步请求来调用API接口。以下是实现该目标的多种方法：
一、使用fetch API发送GET请求
fetch是现代浏览器原生支持的异步请求接口，基于Promise设计，语法简洁且无需额外引入库。它默认发送GET请求，适用于大多数轻量级数据获取场景。
1、在HTML文件的标签内或外部JS文件中编写JavaScript代码。
2、调用fetch函数并传入API的完整URL字符串，例如”https://api.example.com/data”。
立即学习“前端免费学习笔记（深入）”；
3、使用then方法处理响应对象，调用response.json()解析JSON格式返回体。
4、在第二个then中接收解析后的数据，并执行DOM更新操作，如将数据插入
。
5、使用catch捕获网络错误或解析异常，避免脚本中断。
二、使用XMLHttpRequest手动发起请求
XMLHttpRequest（XHR）是较早的浏览器内置对象，兼容性极强，支持IE7及以上版本。它提供更底层的控制能力，适合需要精细管理请求头、超时或上传进度的场景。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用open方法配置请求方式与URL，例如xhr.open(“GET”, “https://api.example.com/data”, true);
3、设置onload事件处理函数，在状态码为200时读取xhr.responseText并解析为JSON。
4、调用send()方法实际发出请求。
5、设置onerror事件监听网络失败，设置ontimeout处理超时情况，并为xhr.timeout赋值毫秒数。
三、使用async/await语法封装fetch调用
async/await是Promise的语法糖，可使异步代码书写形式接近同步逻辑，提升可读性与调试便利性。该方式需确保运行环境支持ES2017及以上标准。
1、在script标签中声明一个async函数，例如async function loadData() { }。
2、在函数内部使用await等待fetch调用完成，例如const response = await fetch(“https://api.example.com/data”);
3、再次使用await等待response.json()解析完成，获得结构化数据对象。
4、将返回数据赋值给变量后，调用updateUI(data)等自定义函数更新页面内容。
5、用try…catch包裹整个await流程，统一捕获可能发生的TypeError或NetworkError。
四、通过动态创建script标签实现JSONP跨域请求
JSONP利用标签不受同源策略限制的特性，适用于仅支持GET且响应为函数调用格式的老旧API。该方法要求服务端配合返回指定callback名称包裹的数据。
1、定义全局回调函数，例如window.handleApiResponse = function(data) { console.log(data); };
2、创建script元素：const script = document.createElement(“script”);
3、设置script.src属性为API地址并拼接callback参数，例如”https://api.example.com/data?callback=handleApiResponse”;
4、将script元素添加到document.head中触发加载。
5、在回调函数内部执行DOM操作，完成后可选择移除该script节点以减少内存占用。
五、使用第三方库Axios发送请求
Axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境，内置请求/响应拦截器、自动JSON转换及客户端防御XSRF功能，适合中大型项目集成。
1、通过CDN在HTML中引入Axios：。
2、调用axios.get()方法传入API URL，例如axios.get(“https://api.example.com/data”)。
3、链式调用then方法接收响应对象的data属性，即服务器返回的主体内容。
4、在catch中捕获错误，可通过error.response.status区分HTTP错误码，或通过error.request判断是否发出请求。
5、如需设置请求头（如Authorization），可在请求配置对象中添加headers字段，例如{ headers: { “Authorization”: “Bearer token” } }。
以上就是HTML如何调用API接口_异步数据获取方法【指南】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606227.html
微信扫一扫 
支付宝扫一扫 
