Fetch API 与后端交互
1.flask 之创建和运行2.flask之配置文件3.flask 路由、钩子函数4.flask之蓝图和前后端变量传递5.python之任务调度（APScheduler和schedule）6.flask之cbv、模版7.flask之请求对象、响应对象、cookies和session8.falsk之闪现、wtforms表单9.django、flask自定义命令10.flask 之信号(事件)、信号量(计数器、锁)11.flask之 sqlalchemy 原生操作和增删改查12.flask之sqlalchemy ORM 一对多、多对多13.flask之 scoped实现线程安全.py14.flask之 sqlalchemy 高级查询
15.Fetch API 与后端交互
一、Fetch API
1、什么是 fetch
fetch 是现代浏览器中提供的原生 JavaScript API，用于处理 HTTP 请求。主要特点包括：
-
Promise-based:
fetch基于 Promise，简化了异步请求的结构，使得代码更加清晰和易于维护。- 支持 async/await，使得处理异步操作更接近同步代码风格，易读性更好。
-
简洁性:
- API 更简洁，提供的功能更基础（如 GET 和 POST 请求）。
- 只需要用 native JavaScript 就可以完成，不依赖第三方库。
-
灵活性:
- 返回一个 Response 对象，提供了多种方法来处理响应体数据（如
text()、json()、blob()等）。 - 需要手动处理 JSON 数据解析和 HTTP 错误。
- 返回一个 Response 对象，提供了多种方法来处理响应体数据（如
-
现代浏览器支持:
fetch受限于现代浏览器，旧版浏览器的支持较差（可以使用 polyfill 来兼容）。- 默认不发送 cookies，需要通过
credentials属性配置。
2、书写格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | fetch(url, options) .then(response => { // 检查响应状态 if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // 解析为 JSON }) .then(data => { // 处理接收到的数据 console.log(data); }) .catch(error => { // 处理错误 console.error('Fetch error:', error); }); |
参数说明
- url: 请求的地址，可以是相对或绝对路径。
- options: 一个包含请求设置的对象（可选）。常见选项包括：
method: 请求方法，如'GET','POST','PUT','DELETE'等。默认是'GET'。headers: 请求头信息，通常用于发送 JSON 数据。body: 请求主体，通常是一些数据（如 JSON 字符串）需要发送到服务器。
GET请求
1 2 3 4 | fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); |
POST请求
1 2 3 4 5 6 7 8 9 10 | fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); |
使用 async/await
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | async function fetchData() { try { const response = await fetch('https://api.example.com/data', { method: 'GET', credentials: 'include' // 这行确保请求包含 cookies }); 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(); |
Fetch API 不会自动拒绝 HTTP 错误状态（如 404、500），因此需要手动检查 response.ok 来处理错误。
默认情况下，Fetch 不会发送和接收 cookies，除非设置 credentials 属性（例如 { credentials: 'include' }）来包含跨域请求中的 cookies
3、案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | fetch("{{ url_for('slowlog_analysis.get_mysql_slow_log_stat') }}?period=" + encodeURIComponent(period), { method: 'GET', headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => { $('#loading').hide(); if (data.code === 200) { data.data.forEach(item => { aggregatedTable.row.add([ item['id'], `${item['start_time']} - ${item['end_time']}`, item['user'], item['avg_query_duration'], item['lock_table_duration'], item['return_rows'], item['scann_rows'], item['count'], item['exec_sql'] ]).draw(); }); } else { alert('分析失败: ' + data.error); } }) .catch(error => { $('#loading').hide(); alert('请求失败: ' + error.message); }); |
二、AJAX (通过 jQuery)
1、AJAX 介绍
$.ajax() 是 jQuery 提供的方法，属于经典的 AJAX 技术。主要特点包括：
-
易用性:
- 提供了一系列的选项（如
url、type、data、success、error等）来配置请求，非常适合快速搭建应用。 - 内置强大的功能，例如自动处理 JSON 数据、序列化对象、处理跨域请求（配合 JSONP）等。
- 提供了一系列的选项（如
-
回调机制:
- 采用回调函数处理请求的成功和失败，代码可能会出现“回调地狱”现象，特别是在需要进行链式多个 AJAX 调用时。
- jQuery 1.5+ 支持基于
Deferred的链式调用，但机制相对复杂。
-
浏览器兼容性:
- jQuery 对浏览器兼容性进行了封装，使用 AJAX 提供了一致的接口和行为，不需要担心不同浏览器之间的差异。
-
复杂性:
- 由于 jQuery 的出名和广泛使用，许多项目依赖 jQuery，内置 AJAX 可以无缝使用。
- 适合处理复杂的 AJAX 请求，提供了对请求流程的细粒度控制。
三、Fetch API 和 AJAX 对比
1、适用场景
fetch :
适合现代项目，尤其是使用 ES6+ 的项目
需要流式处理或更灵活的请求控制时
不需要兼容 IE 或已经使用 polyfill 的项目
不支持流式处理。
ajax :
适合需要兼容旧浏览器（如 IE）的项目。
项目中已经依赖 jQuery 的情况下，使用 ajax 可以保持一致性。
需要快速实现跨域请求（如 JSONP）时。
支持流式处理（ ReadableStream ），适合处理大文件或分块数据。
2、总结
如果需要快速集成到现有使用 jQuery 的项目并且兼容性是一个主要考虑因素，使用 $.ajax() 是合适的选择。
若项目没有 jQuery 依赖，或者你想要利用现代 JavaScript 的特性（如 Promise 和 async/await）开发简洁和易维护的代码，fetch 是更好的选择
