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

标签： javascript java html js node.js json node npm 浏览器 回调函数 axios