Python(Flask)前后端交互

一.axios

•  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

• fetch api特点

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

• 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

• 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();
};