在前后端数据交互中，使用 Fetch API 是一种现代的、基于 Promise 的方法。Fetch API 提供了一种更简单、更强大的方式来进行网络请求，并取代了传统的 XMLHttpRequest。以下是在前后端数据交互中使用 Fetch API 的基本步骤：
1. 发起简单的 GET 请求：
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
复制代码
2. 发起带有参数的 GET 请求：
const params = { method: 'GET', headers: { 'Content-Type': 'application/json', // 可添加其他请求头 }};
fetch('https://api.example.com/data?param1=value1¶m2=value2', params) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
复制代码
3. 发起 POST 请求：
const params = { method: 'POST', headers: { 'Content-Type': 'application/json', // 可添加其他请求头 }, body: JSON.stringify({ key1: 'value1', key2: 'value2' })};
fetch('https://api.example.com/data', params) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
复制代码
4. 处理响应：
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
复制代码
5. 使用 Async/Await：
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); }}
fetchData();
复制代码
6. 设置请求头和处理 Cookie：
const params = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YourAccessToken', // 可添加其他请求头 }, credentials: 'include', // 发送和接收 Cookie body: JSON.stringify({ key1: 'value1', key2: 'value2' })};
fetch('https://api.example.com/data', params) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
复制代码
以上代码中的 fetch 函数返回的是一个 Promise 对象，可以使用 then 和 catch 方法处理成功和失败的情况。
Fetch API 提供了一种更简单和现代的方式来进行网络请求，它支持 Promise、Async/Await、流式处理等特性。在实际开发中，你可以根据具体需求设置请求头、处理响应、使用 Async/Await 等功能，以更灵活地处理前后端数据交互。
推荐
Python 全栈开发与自动化测试开发班
由浅入深实战进阶，从小白到高手
以 Python 全栈开发为基础，深入教授自动化测试技能，为学员打造全面的技术能力。通过系统学习和实际项目实战，学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用 Python 进行开发，还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。
课程详情
Python 开发必备基础技能与项目实战
Pvthon 编程语言/算法和数据结构/面向对象编程 Web 后端开发/前端开发/测试管理平台项目实战
人工智能 ChatGPT 实战
人工智能辅助学习各种开发和测试技能/Pytorch 深度学框架/平台开发实战
数据分析与自动化办公
数据采集/Pandas 与数据处理技术/ECharts 与数据可视化技术/爬虫实战/自动化办公/批量文件处理
UI 自动化测试与高级项目实战
Web 自动化测试/App 自动化测试/ PageObject 设计模式
接口自动化测试
接口协议分析/Mock 实战/服务端接口测试
性能测试
性能测试流程与方法/JMeter 脚本参数化/Grafana 监控系统搭建
简历指导与模拟面试
1V1 简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务
名企专家 1v1 辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘
课程亮点
名企私教服务 先学习后付费 高额奖学金
专属社群+晚自习在线答疑
5V1 全方位辅导作业+考试强化学习效果
简历修改 模拟面试 就业内推 面试复盘
评论