上一篇
HTML如何调用API接口实例？前端调用API接口报错怎么解决
在Web开发中，HTML本身是静态标记语言，无法直接发起网络请求，要实现HTML页面调用API接口，必须借助JavaScript（JS）作为桥梁，目前主流且推荐的方式是使用 fetch API 或 XMLHttpRequest（XHR），以下将详细介绍基于 fetch 的现代实现方案，涵盖GET和POST请求,并处理常见的跨域及错误情况。
基础环境准备
在编写代码前，请确保你的HTML文件中引入了JavaScript，或者在 <body> 标签底部放置 <script> 标签，为了演示清晰，我们将创建一个简单的HTML结构,包含一个按钮和一个用于显示结果的区域。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">HTML调用API示例</title> <style> #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; } button { padding: 10px 20px; cursor: pointer; } </style> </head> <body> <h2>API 调用演示</h2> <button id="getDataBtn">获取数据 (GET)</button> <button id="postDataBtn">提交数据 (POST)</button> <div id="result">等待操作...</div> <script> // JavaScript 代码将放在这里 </script> </body> </html>
GET 请求实现
GET 请求通常用于从服务器获取数据，使用 fetch 时，默认就是 GET 方法，我们需要处理返回的 Response 对象，将其转换为 JSON 格式。
核心逻辑步骤：
- 调用 fetch(url)。
- 检查 response.ok 确保请求成功（HTTP状态码在200-299之间）。
- 使用 response.json() 解析数据。
- 处理成功或失败的回调。
document.getElementById('getDataBtn').addEventListener('click', function() { const resultDiv = document.getElementById('result'); resultDiv.innerText = '正在加载...'; // 使用公共测试API const url = 'https://jsonplaceholder.typicode.com/posts/1'; fetch(url) .then(response => { if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } return response.json(); }) .then(data => { resultDiv.innerText = '获取成功:n' + JSON.stringify(data, null, 2); }) .catch(error => { resultDiv.innerText = '请求失败: ' + error.message; console.error('Error:', error); }); });
POST 请求实现
POST 请求用于向服务器提交数据，与 GET 不同，POST 需要配置 options 对象，指定 method 为 'POST'，设置 headers 表明内容类型，并提供 body 数据。
关键注意点：
- body 必须是字符串格式，通常使用 JSON.stringify() 转换对象。
- headers 中必须包含 'Content-Type': 'application/json',否则服务器可能无法正确解析数据。
document.getElementById('postDataBtn').addEventListener('click', function() { const resultDiv = document.getElementById('result'); resultDiv.innerText = '正在提交...'; const url = 'https://jsonplaceholder.typicode.com/posts'; const postData = { title: 'foo', body: 'bar', userId: 1 }; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json; charset=UTF-8', }, body: JSON.stringify(postData) }) .then(response => { if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } return response.json(); }) .then(data => { resultDiv.innerText = '提交成功:n' + JSON.stringify(data, null, 2); }) .catch(error => { resultDiv.innerText = '提交失败: ' + error.message; console.error('Error:', error); }); });
异步编程进阶：Async/Await
上述代码使用了 .then() 链式调用，这在处理多个异步操作时容易形成“回调地狱”，现代 JavaScript 推荐使用 async/await 语法，使代码看起来更像同步代码,可读性更强。
async function fetchUserData() { const resultDiv = document.getElementById('result'); try { resultDiv.innerText = '正在加载 (Async/Await)...'; const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const data = await response.json(); resultDiv.innerText = '获取成功 (Async/Await):n' + JSON.stringify(data, null, 2); } catch (error) { resultDiv.innerText = '请求失败: ' + error.message; console.error('Error:', error); } } // 绑定事件 document.getElementById('getDataBtn').addEventListener('click', fetchUserData);
常见问题与解决方案对照表
在实际开发中，调用API可能会遇到各种阻碍,以下是常见问题的排查对照表：
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| CORS 错误 (Cross-Origin Resource Sharing) | 浏览器安全策略阻止了跨域请求。 | 后端服务器配置允许跨域（添加 Access-Control-Allow-Origin 头）。 开发阶段使用代理服务器（如 Webpack Dev Server, Vite Proxy）。 |
| 404 Not Found | 请求的URL地址错误或资源不存在。 | 检查API端点URL是否正确，注意大小写和路径层级。 |
| 401 Unauthorized | 需要身份验证但未提供Token或Token无效。 | 检查请求头中是否包含正确的 Authorization: Bearer <token>。 |
| 403 Forbidden | 服务器理解请求但拒绝执行。 | 检查权限设置，确认用户是否有访问该资源的权限。 |
| 500 Internal Server Error | 服务器内部发生错误。 | 联系后端开发人员检查服务器日志，前端无法直接解决。 |
| JSON 解析失败 | 服务器返回的不是有效的JSON格式。 | 使用 response.text() 先查看原始返回内容，确认格式后再解析。 |
相关问题与解答
为什么我的 fetch 请求在控制台没有报错，但数据没有显示？
解答：
这种情况通常是因为 fetch 本身只会在网络故障或DNS解析失败时抛出异常，如果服务器返回了 HTTP 错误状态码（如 404, 500），fetch 仍然会认为请求“成功”完成，并返回一个 Response 对象，必须手动检查 response.ok 或 response.status，如果未检查状态码，直接调用 .json()，当服务器返回非JSON内容（如HTML错误页面）时，.json() 才会抛出异常，检查浏览器控制台的 Network 标签页，查看实际返回的状态码和响应内容,是排查此类问题的关键。
在移动端或弱网环境下，如何优化 API 调用体验？
解答：
- 添加加载状态：在请求发起前禁用按钮并显示“加载中”提示,防止用户重复点击提交。
- 设置超时控制：fetch 默认没有超时机制，可以使用 AbortController 来设置超时，避免请求无限挂起。 const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时 fetch(url, { signal: controller.signal }).then(...).finally(() => clearTimeout(timeoutId));
- 数据缓存：对于不常变化的数据，可以使用 localStorage 或 sessionStorage 缓存结果,减少网络请求。
- 重试机制：对于网络波动导致的失败，可以实现简单的指数退避重试逻辑,提高成功率。
