Python(Flask)前后端交互

一.axios

1. Promise 支持： Axios 是基于 Promise 实现的，使用 Promise 对 HTTP 请求进行处理。这使得异步请求更为灵活，可以使用 .then() 和 .catch() 处理成功和失败的情况，使得异步代码更加清晰和可维护。 

2. 拦截器： Axios 提供了请求和响应拦截器，允许在请求或响应被处理前拦截它们。这提供了一种机制，使得可以在请求发送或响应返回时进行全局或局部的操作，如添加请求头、修改请求数据、处理错误等。

3. CSRF 保护： Axios 集成了对跨站请求伪造（CSRF）的保护机制。可以通过配置选项来自动在请求中添加 CSRF token，提高应用的安全性。

4. 取消请求： Axios 允许取消请求，通过创建 CancelToken，可以在需要时取消一个或多个请求。这在用户取消请求或页面切换时尤其有用，可以减少不必要的网络请求，提高性能。

5. 自动转换 JSON： 默认情况下，Axios 会自动将响应数据转换为 JSON 格式。这减少了在处理响应时的手动转换步骤，提高了开发效率。

6. 客户端和服务端通用： Axios 不仅可以在浏览器中使用，也可以在 Node.js 环境中使用，使得开发者可以在前后端通用的代码中使用相同的 HTTP 客户端

7. 并发请求处理： Axios 支持同时发送多个请求，并提供了 axios.all 和 axios.spread 方法用于处理并发请求的结果。这使得在需要同时发起多个请求时更为方便。

try:
    parameter = request.json.get('parameter')
    return jsonify({'correctMessage': "正确"})
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500
    

axios.post('/路由', {parameter: 参数})
	.then(response => {
		// 处理正确消息
		const correctMessage = response.data.correctMessage;
		console.log(correctMessage);
	})
	.catch(error => {
		// 处理错误消息
		const errorMessage = error.response.data.errorMessage;
		console.log(errorMessage);
	})
    .finally(() => {
        // 无论成功或失败，都会执行的操作
        // 用于释放资源、关闭加载动画或进行一些收尾工作，例如清理工作或隐藏加载状态
        console.log('Request completed');
    });

二.Fetch

1. 基于 Promise：Fetch API 使用 Promise 对象来处理异步请求。这使得它更容易编写和管理异步代码，并且可以避免回调地狱的问题。

2. 内置于浏览器：Fetch API 是浏览器内置的标准 API，不需要额外的库或插件。它是现代浏览器的一部分，因此可以在大多数现代浏览器中直接使用。

3. 支持异步请求：Fetch API 支持发送各种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等，并且可以发送和接收 JSON、FormData、Blob 等类型的数据。

4. 简洁的语法：Fetch API 的语法非常简洁和直观，使用起来十分方便。它的请求和响应对象都是基于流式操作的，可以通过链式调用来设置请求参数、处理响应数据等。

5. 可自定义的请求和响应：Fetch API 允许用户灵活地配置请求和响应，包括设置请求头、请求方法、请求体、响应类型等。这使得它非常适合于各种不同的网络请求场景。

6. 跨域请求：Fetch API 默认支持跨域请求，并且可以通过设置 CORS（跨域资源共享）头来控制跨域请求的行为。

7. 可替代性：Fetch API 可以替代传统的 XMLHttpRequest 对象，具有更加现代化的设计和更好的性能。它是未来 Web 开发的主流趋势之一。

try:
    # 获取前端传递的 JSON 数据
    data = request.get_json()
    parameter = data.get('parameter')
    return Response(stream, content_type='video/mp4')
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500

fetch('/路由', {
	method: 'POST', 
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify(parameter)  // 将 JSON 对象转为字符串并发送给后端
})
	.then(response => {
		if (response.ok) {
			// HTTP 状态码在成功范围内
			return response.blob();
		} else {
			// HTTP 状态码表示请求失败
			return response.json().then(data => {
				throw new Error(data.errorMessage);
			});
		}
	})
	.then(blob => {
		videoPlayer.src = URL.createObjectURL(blob);
	})
	.catch(error => {
		// 插入错误内容
        console.log(error.message);
	});

1. response.text()：适用于处理文本文件或纯文本响应
2. response.json()：适用于处理 JSON 数据
3. response.arrayBuffer()：适用于处理纯粹的二进制数据
4. response.blob()：适用于处理具有更多元数据的二进制数据，通常用于处理文件和媒体数据
5. response.formData()：适用于处理表单数据

三.XMLHttpRequest

1. 异步性：XMLHttpRequest 支持异步请求，可以在不阻塞页面加载情况下发送请求和接收响应。这使用户在等待请求完成的同时可以继续浏览页面或执行其他操作，提升了用户体验。

2. 灵活性：XMLHttpRequest 提供了丰富的 API 和配置选项，可以满足各种不同的请求需求。例如，可以设置请求方法、请求头、请求参数、超时时间等。

3. 跨域支持：XMLHttpRequest 可以发送跨域请求，但在同源策略的限制下，它只能发送同源的请求。通过 CORS（跨源资源共享）机制，服务器可以允许跨域请求。

4. 同步请求：除了支持异步请求外，XMLHttpRequest 还可以发送同步请求。但是，同步请求会阻塞页面加载，因此不推荐在主线程中使用。

5. 原生支持：XMLHttpRequest 是浏览器原生支持的技术，在大多数现代浏览器中都可以使用，并且不需要额外的插件或库。

6. 对数据格式的支持：XMLHttpRequest 支持多种数据格式，包括文本、JSON、XML、Blob、FormData 等，可以根据需要进行选择和处理。

7. 事件驱动：XMLHttpRequest 使用事件模型来处理请求和响应，开发者可以通过监听各种事件（如 load、progress、error 等）来处理请求状态变化和响应数据。

8. 底层接口：XMLHttpRequest 提供了底层的 API，使开发者可以更灵活地控制请求和响应的细节，实现自定义的数据交换逻辑。

try:
    # 获取前端传递的数据
    parameter = request.args.get('parameter')
    return jsonify("ok")
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 打开GET请求
xhr.open('GET', '/路由?parameter=' + 参数, true);
// 监听请求状态变化事件
xhr.onreadystatechange = function() {
  // 当请求完成并且响应就绪时
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 响应成功，处理返回的数据
      console.log(xhr.responseText);
  } else {
      // 响应失败，输出错误信息
      console.log(xhr.responseText);
    }
};
xhr.send();

四.SSE

1. 单向通信：SSE 是一种单向通信方式，只允许服务器向客户端推送数据，客户端无法向服务器发送数据。
2. 基于 HTTP：SSE 基于 HTTP 协议，使用标准的 HTTP 请求和响应头来建立连接，并通过长连接保持持续的通信。
3. 长连接：SSE 基于长连接（HTTP Keep-Alive），通过保持连接打开状态，实现服务器持续向客户端发送数据，而无需客户端发起新的请求。
4. 文本数据格式：SSE 使用文本数据格式传输数据，通常是纯文本或格式化的文本数据，可以是 JSON、XML 等格式。
5. 事件流：服务器向客户端发送的数据以事件流的形式传输，每个事件以特定的格式发送，包括数据字段和可选的事件类型、标识符等。
6. 自动重连：如果连接断开或丢失，客户端会自动尝试重新建立连接，从而保持持续的通信。
7. 跨域支持：SSE 支持跨域通信，可以在不同域名、不同端口或不同协议的服务器之间进行通信。
8. 实时更新：由于是单向实时通信，因此可以用于实时更新网页内容、实时推送事件通知、实时更新数据等应用场景。

def sse():
    def generate_events():
        for i in range(10):
            # 发送事件数据
            yield f"data:{i}\n\n"  
    return Response(generate_events(), content_type='text/event-stream')

// 检查是否已经存在一个 EventSource 对象，如果存在，则关闭它
let eventSource = null;
if (eventSource) {
	eventSource.close();
}
// 建立 SSE 连接
const eventSource = new EventSource('/路由');
// 监听SSE消息
eventSource.onmessage = (event) => {
    const eventData = event.data;
};
// 监听SSE连接错误
eventSource.onerror = (error) => {
    console.error('连接错误:', error);
    // 关闭 SSE 连接
    eventSource.close();
};

作者：泛滥丶