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.allaxios.spread 方法用于处理并发请求的结果。这使得在需要同时发起多个请求时更为方便。

  •  请求方法

axios.get发送 GET 请求。可以传递一个 URL 和一个可选的配置对象。
axios.post发送 POST 请求。可以传递一个 URL、请求数据(可选)和一个可选的配置对象。
axios.put发送 PUT 请求。与 axios.post 类似,用于更新资源。
axios.delete发送 DELETE 请求。用于删除指定的资源。
axios.all用于同时处理多个请求。可以传递一个包含多个 Promise 的数组或对象。
axios.create用于创建一个新的 Axios 实例,允许配置该实例的默认选项,如 baseURL、headers 等。
  • 代码案例

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 开发的主流趋势之一。

  •  请求方法

GET用于从服务器获取数据
DELETE用于从服务器删除资源
HEAD用于从服务器获取资源的头信息,与 GET 类似,不返回实际的资源内容,只返回头信息
POST用于向服务器发送数据,服务器处理该数据
PUT用于向服务器发送数据以创建或更新资源,PUT 请求通常用于更新整个资源
PATCH用于部分更新服务器上的资源,PATCH 请求通常用于更新资源的部分属性
  • 代码案例

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,使开发者可以更灵活地控制请求和响应的细节,实现自定义的数据交换逻辑。

  • 请求方法

GET

用于从服务器获取数据,不会对服务器端资源进行修改
POST用于向服务器提交数据,通常用于创建新资源或向服务器提交表单数据
PUT用于更新服务器上的资源,通常用于更新整个资源
DELETE用于删除服务器上的资源
PATCH用于部分更新服务器上的资源,通常用于更新资源的部分属性
OPTIONS

用于获取服务器支持的请求方法,通常在跨域请求中预检查服务器是否支持某个请求方法时使用

  • 代码案例 

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值