Fetch API 与后端交互

一、Fetch API 

1、什么是 fetch

fetch 是现代浏览器中提供的原生 JavaScript API，用于处理 HTTP 请求。主要特点包括：

1. Promise-based:

   • fetch 基于 Promise，简化了异步请求的结构，使得代码更加清晰和易于维护。
   • 支持 async/await，使得处理异步操作更接近同步代码风格，易读性更好。

2. 简洁性:

   • API 更简洁，提供的功能更基础（如 GET 和 POST 请求）。
   • 只需要用 native JavaScript 就可以完成，不依赖第三方库。

3. 灵活性:

   • 返回一个 Response 对象，提供了多种方法来处理响应体数据（如 text()、json()、blob() 等）。
   • 需要手动处理 JSON 数据解析和 HTTP 错误。

4. 现代浏览器支持:

   • 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 技术。主要特点包括：

1. 易用性:

   • 提供了一系列的选项（如 url、type、data、success、error 等）来配置请求，非常适合快速搭建应用。
   • 内置强大的功能，例如自动处理 JSON 数据、序列化对象、处理跨域请求（配合 JSONP）等。

2. 回调机制:

   • 采用回调函数处理请求的成功和失败，代码可能会出现“回调地狱”现象，特别是在需要进行链式多个 AJAX 调用时。
   • jQuery 1.5+ 支持基于 Deferred 的链式调用，但机制相对复杂。

3. 浏览器兼容性:

   • jQuery 对浏览器兼容性进行了封装，使用 AJAX 提供了一致的接口和行为，不需要担心不同浏览器之间的差异。

4. 复杂性:

   • 由于 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 是更好的选择