如何避免Flask Web应用计算时冻结并完成后重定向？

核心思路 #

放弃后端主动重定向的思路（HTTP无状态协议不支持），改用「前端提交→返回加载页→前端轮询任务状态→任务完成后前端自动跳转」的流程，完美适配你的需求。

1. Blueprint下的后台任务处理（解决上下文问题） #

用线程处理异步任务，通过current_app获取Flask上下文，不用依赖全局app变量，同时用字典（生产环境换Redis）追踪任务状态：

from flask import Blueprint, request, render_template, jsonify, current_app
import threading
import time
from uuid import uuid4

# 初始化Blueprint
task_bp = Blueprint('task', __name__)

# 临时存储任务状态，生产环境建议替换为Redis
task_status = {}

def background_process(task_id, submit_data):
    # 在后台线程中获取Flask上下文，支持后续数据库/扩展操作
    with current_app.app_context():
        # 模拟耗时计算，替换成你的业务逻辑
        time.sleep(5)
        # 处理完成后更新状态
        task_status[task_id] = {
            "status": "done",
            "result": f"处理结果：{submit_data}"
        }

@task_bp.route('/submit-data', methods=['POST'])
def submit_data():
    client_data = request.form.get('input_data')
    # 生成唯一任务ID，用于追踪状态
    task_id = str(uuid4())
    # 初始化任务状态为处理中
    task_status[task_id] = {"status": "processing"}
    # 启动后台线程，设置daemon=True避免阻塞主进程退出
    threading.Thread(target=background_process, args=(task_id, client_data), daemon=True).start()
    # 返回加载页面，把任务ID传给前端
    return render_template('loading.html', task_id=task_id)

@task_bp.route('/check-task/<task_id>')
def check_task_status(task_id):
    # 返回当前任务状态
    return jsonify(task_status.get(task_id, {"status": "invalid"}))

2. Bootstrap加载动画页面（优化UI体验） #

用Bootstrap的官方加载组件，配合JS轮询任务状态，完成后自动跳转：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据处理中</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Bootstrap居中加载动画 -->
    <div class="d-flex justify-content-center align-items-center vh-100">
        <div class="text-center">
            <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-4 fs-5">正在处理数据，请稍候...</p>
        </div>
    </div>

    <script>
        const taskId = "{{ task_id }}";
        // 轮询间隔（1秒一次）
        const pollGap = 1000;

        function checkStatus() {
            fetch(`/check-task/${taskId}`)
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'done') {
                        // 任务完成，跳转到结果页并携带结果
                        window.location.href = `/show-result?data=${encodeURIComponent(data.result)}`;
                    } else if (data.status === 'invalid') {
                        alert('任务不存在，请重新提交');
                        window.location.href = '/';
                    } else {
                        // 未完成，继续轮询
                        setTimeout(checkStatus, pollGap);
                    }
                })
                .catch(err => {
                    console.log('查询失败，重试中...');
                    setTimeout(checkStatus, pollGap);
                });
        }

        // 页面加载后立即开始轮询
        window.onload = checkStatus;
    </script>
</body>
</html>

3. 结果页实现 #

@task_bp.route('/show-result')
def show_result():
    result_data = request.args.get('data')
    return render_template('result.html', result=result_data)

关键问题解决说明 #

• Blueprint上下文问题：用current_app.app_context()替代全局app，在后台线程中获取上下文，确保Flask扩展（如数据库）能正常工作。
• 后端无法重定向：HTTP是无状态协议，后端不能主动触发客户端跳转，前端轮询是标准且可靠的解决方案。
• Bootstrap动画：使用官方的spinner-grow组件，配合Flex布局实现全屏居中加载，UI体验更专业。

生产环境优化建议 #

• 把内存中的task_status换成Redis、Memcached等分布式存储，避免多进程/多服务器部署时状态丢失。
• 给后台任务添加超时逻辑，防止任务挂起导致前端无限轮询。
• 复杂场景可以用Celery、Flask-APScheduler替代原生线程，更适合大规模异步任务管理。

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