Flask中模型预测时的异步处理：股票价格预测Web应用加载优化

核心思路 #

把耗时的模型预测逻辑从主请求中拆分，主请求仅生成并返回前两个图表的页面，前端加载完成后异步调用单独的预测接口获取第三个图表数据，再渲染到页面。

1. 调整Flask后端代码 #

# 首先配置SECRET_KEY，用于模板参数安全序列化，必填
app.config['SECRET_KEY'] = '你自定义的密钥字符串'

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        df = getdf() # 获取用户输入对应的股票数据
        jsonLine, jsonBox = plotGraphs(df)  # 生成前两个图表的json数据
        # 把用户输入的参数传到模板，供后续异步请求使用
        user_params = {
            'stock_code': request.form.get('stock_code'),
            'start_date': request.form.get('start_date'),
            'end_date': request.form.get('end_date')
        }
        # 不执行模型预测逻辑，直接返回前两个图表的页面
        return render_template('chart.html', jsonLine=jsonLine, jsonBox=jsonBox, user_params=user_params)
    return render_template("chart.html")

# 新增单独的预测接口
@app.route('/get-prediction', methods=['POST'])
def get_prediction():
    # 接收前端传的用户参数，重新获取df
    df = getdf() 
    train, valid = buildModel(df)  # 执行耗时的模型预测逻辑
    predictionJson = viz.plotPrediction(train, valid)  # 生成预测图表json
    # 直接返回json格式的预测图表数据
    return predictionJson

2. 修改HTML代码 #

给预测图表区域添加加载提示，提升用户体验：

<div id="lineChart" class="chart"></div>
<div id="boxPlot" class="chart2"></div>
<div id="prediction" class="chart2">
  <p style="text-align: center; padding: 50px 0;">正在生成预测结果，请稍候...</p>
</div>

3. 调整JavaScript代码 #

删除原有的预测图表同步渲染逻辑，新增异步请求逻辑：

<script type="text/javascript">
    function drawPlotlyGraph(graph, id) {
        Plotly.plot(id, graph, {});
    }
    // 渲染前两个图表，和原有逻辑一致
    let lineChart = {{ jsonLine | safe}};
    drawPlotlyGraph(lineChart, "lineChart")

    let boxPlot = {{ jsonBox | safe}};
    drawPlotlyGraph(boxPlot, "boxPlot")

    // 页面加载完成后异步请求预测数据
    window.onload = function() {
        // 从模板获取用户参数，组装成表单数据
        const userParams = {{ user_params | tojson | safe }};
        const formData = new FormData();
        for (const key in userParams) {
            formData.append(key, userParams[key]);
        }
        // 发送异步请求
        fetch('/get-prediction', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(predictionData => {
            // 清空原有加载提示，渲染预测图表
            document.getElementById('prediction').innerHTML = '';
            drawPlotlyGraph(predictionData, "prediction");
        })
        .catch(err => {
            document.getElementById('prediction').innerHTML = '<p style="text-align: center; color: red;">预测生成失败，请重试</p>';
            console.error('预测请求出错:', err);
        })
    }
</script>

补充说明 #

如果你的getdf()方法是直接从request.form获取参数，不需要额外修改，异步请求会把参数按表单格式传递，和原有逻辑完全兼容。

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