Flask中如何正确返回格式化后的timedelta时间字符串至前端

错误原因 #

报错TypeError: unsupported type for timedelta seconds component: str的核心原因是：你调用datetime.timedelta(seconds=average)时，average已经是字符串类型，但timedelta的seconds参数要求传入整数或浮点数，类型不匹配导致报错。

大概率是你格式化后把字符串赋值回了average变量，后续循环或代码中又重复用这个字符串调用timedelta，引发类型污染。

解决方案 #

1. 保留原始数值，单独存储格式化结果 #

不要覆盖原始的average数值变量，用新变量存储格式化后的字符串，确保传给timedelta的始终是数值类型。

示例代码：

from datetime import timedelta
import time
from flask import Flask, Response, jsonify

app = Flask(__name__)

@app.route('/update')
def update():
    def data_generator():
        while True:
            # 示例total计算逻辑，替换为你的实际代码
            total = 100
            # 保留原始的average数值（基于time.time的float类型）
            raw_average = time.time() % 3600  # 取小时内的秒数，避免超过1小时显示多余位数
            # 单独生成格式化字符串，不修改原始数值
            formatted_average = str(timedelta(seconds=raw_average))[2:7]
            # 以SSE格式返回数据（适配前端定时请求），普通接口可直接return jsonify
            yield f"data: {jsonify({'total': total, 'average': formatted_average}).data.decode('utf-8')}\n\n"
            time.sleep(1)
    return Response(data_generator(), mimetype='text/event-stream')

2. 避免循环中变量类型污染 #

如果生成器是循环运行的，确保每次循环中，timedelta(seconds=...)接收的都是新计算的数值，而非上一次循环中已转成字符串的变量。

前端适配示例 #

如果后端用SSE返回数据，前端jQuery处理代码：

var source = new EventSource('/update');
source.onmessage = function(event) {
    var data = JSON.parse(event.data);
    // 渲染到页面对应元素
    $('#total').text(data.total);
    $('#average').text(data.average);
};

如果是普通定时AJAX请求：

setInterval(function() {
    $.get('/update', function(data) {
        $('#total').text(data.total);
        $('#average').text(data.average);
    });
}, 1000);

内容的提问来源于stack exchange，提问作者Ethan0619