一、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、书写格式
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请求
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
POST请求
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
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、案例
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）时。
2、总结
如果需要快速集成到现有使用 jQuery 的项目并且兼容性是一个主要考虑因素，使用 $.ajax() 是合适的选择。
若项目没有 jQuery 依赖，或者你想要利用现代 JavaScript 的特性（如 Promise 和 async/await）开发简洁和易维护的代码，fetch 是更好的选择
