‘; // 显示加载状态
try {
// 发起GET请求
const response = await fetch(‘https://jsonplaceholder.typicode.com/users’);
// 检查HTTP状态码，如果非200-299则抛出错误
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 解析JSON数据
const users = await response.json();
// 渲染数据
container.innerHTML = '';
users.forEach(user => {
const p = document.createElement('p');
p.textContent = `${user.name} - ${user.email}`;
container.appendChild(p);
});} catch (error) {
console.error(‘获取数据失败:’, error);
container.innerHTML = ‘
加载失败，请重试
‘;
}
});
这段代码展示了完整的请求生命周期：发起请求 -> 检查状态 -> 解析数据 -> 更新DOM -> 错误处理，每一步都至关重要。
<h3>POST请求与数据提交</h3>
获取数据只是第一步，很多时候你需要向服务器提交数据，比如用户注册、表单提交等场景，这时需要使用POST方法，并设置正确的Headers。
对于前端调用后端接口post请求，关键配置如下：
```javascript
const postData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});
const data = await response.json();
console.log('Success:', data);
};注意Content-Type头部的设置，如果缺少这一行，服务器可能无法正确解析请求体，这是新手最容易犯的错误之一。
跨域问题（CORS）的深度解析
在本地开发或前后端分离部署时,你一定会遇到“Access-Control-Allow-Origin”错误，这就是跨域资源共享（CORS）策略在起作用，浏览器出于安全考虑，禁止前端页面访问不同源（协议、域名、端口任一不同）的资源。
解决CORS问题通常有两种思路：前端代理和后端配置。
开发环境：使用代理解决
在Vue CLI或Create React App等现代构建工具中，配置开发服务器代理是最简单的方案，在Vue项目中，你可以在vue.config.js中配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend-server.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
};
这样,浏览器发出的请求仍然是同源的，但构建工具会在后台将其转发到真正的后端服务器，这避免了在开发阶段处理复杂的CORS配置。
生产环境：后端配置响应头
当项目部署到生产环境时,代理可能不再适用，或者你需要直接访问后端API，必须由后端服务器配置CORS响应头。
常见的CORS头包括：
Access-Control-Allow-Origin: 指定允许访问的域名，如表示允许所有，或指定具体域名如https://www.example.com。Access-Control-Allow-Methods: 允许的HTTP方法，如GET, POST, PUT, DELETE。Access-Control-Allow-Headers: 允许的请求头字段。
据工信部相关技术规范建议,生产环境的CORS配置应遵循最小权限原则，不要随意使用通配符，尤其是涉及用户认证信息的接口。
高级技巧与最佳实践
掌握了基础用法后,你需要关注代码的可维护性和健壮性。
封装统一的请求方法
不要在每个组件中重复编写fetch逻辑,创建一个统一的API服务层，集中管理请求配置、拦截器和错误处理。
// api.js
export const request = async (url, options = {}) => {
const defaultOptions = {
headers: {
'Content-Type': 'application/json'
}
};
// 合并默认配置和用户配置
const config = { ...defaultOptions, ...options };
try {
const response = await fetch(url, config);
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
return await response.json();
} catch (error) {
// 统一错误处理，如记录日志、显示Toast等
console.error('API Request Error:', error);
throw error;
}
};
通过封装,你可以轻松添加Token认证、请求重试、超时控制等功能。
处理并发请求
当页面需要加载多个独立的数据源时,使用Promise.all可以并行发起请求，显著减少等待时间。
const loadDashboard = async () => {
try {
// 并行请求用户信息和订单统计
const [users, stats] = await Promise.all([
fetch('/api/users').then(res => res.json()),
fetch('/api/stats').then(res => res.json())
]);
renderDashboard(users, stats);
} catch (error) {
handleError(error);
}
};
相比串行请求,并行请求能将总耗时从T1 + T2降低至max(T1, T2)。
常见问题解答（Q&A）
前端调用后端接口时，如何处理大文件上传？
对于大文件,建议使用分片上传或流式上传，将文件分割成多个小块，逐个上传到服务器，最后由服务器合并，这样可以避免内存溢出，并提供断点续传的可能性，在HTML中，使用FormData对象配合fetch即可实现：
const formData = new FormData();
formData.append('file', fileInput.files[0]);
await fetch('/upload', { method: 'POST', body: formData });
前端调用后端接口get请求时，如何传递复杂参数？
GET请求的参数通常附加在URL查询字符串中,可以使用URLSearchParams对象来构建规范的查询字符串，避免手动拼接导致的编码错误。
const params = new URLSearchParams({
page: 1,
size: 10,
sort: 'desc'
});
const response = await fetch(`/api/items?${params}`);
前端调用后端接口post请求报错401未授权怎么办？
401错误通常意味着请求缺少有效的身份验证信息,请检查以下几点：1. 是否已在请求头中正确携带Authorization Token（如Bearer <token>）；2. Token是否已过期；3. 后端是否要求特定的Header格式，如果是Token过期，应触发刷新Token的逻辑或跳转登录页。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/317520.html
