HTML如何调用API接口_异步数据获取方法【指南】

必须借助JavaScript发起异步请求调用API，方法包括：一、fetch API；二、XMLHttpRequest；三、async/await封装fetch；四、JSONP跨域；五、Axios库。

如果您在HTML页面中需要从服务器获取动态数据，但页面无法直接执行后端逻辑，则必须借助JavaScript发起异步请求来调用API接口。以下是实现该目标的多种方法：

一、使用fetch API发送GET请求

fetch是现代浏览器原生支持的异步请求接口，基于Promise设计，语法简洁且无需额外引入库。它默认发送GET请求，适用于大多数轻量级数据获取场景。

1、在HTML文件的<script>标签内或外部JS文件中编写JavaScript代码。</script>

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");

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

960

查看详情

3、再次使用await等待response.json()解析完成，获得结构化数据对象。

4、将返回数据赋值给变量后，调用updateUI(data)等自定义函数更新页面内容。

5、用try...catch包裹整个await流程，统一捕获可能发生的TypeError或NetworkError。

四、通过动态创建script标签实现JSONP跨域请求

JSONP利用<script>标签不受同源策略限制的特性，适用于仅支持GET且响应为函数调用格式的老旧API。该方法要求服务端配合返回指定callback名称包裹的数据。</script>

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接口_异步数据获取方法【指南】的详细内容，更多请关注php中文网其它相关文章！