React表单提交至后端任务：支持用户跳转，任务完成后更新状态

后端改造：异步任务处理与状态查询 #

重型任务不能用同步接口阻塞请求，核心思路是改用异步任务队列+状态查询接口：

• 引入异步任务框架（比如Celery），搭配Redis/RabbitMQ做消息中间件。提交任务时，后端立即返回唯一的task_id，任务本身放到队列后台执行，不会阻塞前端请求。
• 实现一个任务状态查询接口，接收task_id后返回当前任务状态（pending/processing/success/failed）和任务结果（比如生成的文件URL）。建议把任务状态存在数据库（如PostgreSQL）或缓存（如Redis）中，方便快速查询。
• 任务完成后，更新对应状态并存储结果信息。

后端代码示例（Python+Celery+FastAPI） #

# 初始化Celery
from celery import Celery

celery_app = Celery('tasks', broker='redis://localhost:6379/0', backend='redis://localhost:6379/0')

# 定义重型任务
@celery_app.task
def heavy_processing_task(data):
    # 替换为你的实际重型处理逻辑（数据计算、文件生成等）
    import time
    time.sleep(180)  # 模拟3分钟耗时任务
    return {"file_url": "/static/generated/result_file.zip"}

# FastAPI接口示例
from fastapi import FastAPI
app = FastAPI()

@app.post("/submit-heavy-task")
async def submit_task(data: dict):
    task = heavy_processing_task.delay(data)
    return {"task_id": task.id}

@app.get("/task-status/{task_id}")
async def check_task_status(task_id: str):
    task = heavy_processing_task.AsyncResult(task_id)
    response = {"status": task.state}
    if task.state == "SUCCESS":
        response["result"] = task.result
    return response

前端改造：全局状态追踪与实时通知 #

前端需要实现任务状态全局持久化、跨页面状态同步和完成通知：

• 用全局状态管理工具（React Context API或Redux）存储task_id和任务状态，确保页面跳转时状态不丢失。
• 提交任务后，启动轮询机制（或WebSocket）追踪任务状态：轮询适合简单场景，WebSocket适合低延迟的实时推送。
• 当任务状态变为success时，触发全局通知（可使用UI库的通知组件，如Ant Design Notification，或自定义组件），同时更新页面相关状态（比如显示文件下载按钮）。

前端代码示例（React+Axios+Context） #

1. 创建全局任务状态Context

// TaskContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';

const TaskContext = createContext();

export function TaskProvider({ children }) {
  const [activeTasks, setActiveTasks] = useState([]);

  // 轮询任务状态（每5秒查询一次）
  useEffect(() => {
    const pollInterval = setInterval(async () => {
      const updatedTasks = await Promise.all(
        activeTasks.map(async task => {
          if (task.status !== 'SUCCESS' && task.status !== 'FAILED') {
            const res = await axios.get(`/task-status/${task.id}`);
            return { ...task, status: res.data.status, result: res.data.result };
          }
          return task;
        })
      );
      setActiveTasks(updatedTasks);

      // 触发完成通知
      updatedTasks.forEach(task => {
        if (task.status === 'SUCCESS' && !task.notified) {
          // 替换为你的通知组件，比如Antd的notification.success
          window.alert(`任务${task.id}完成！文件已就绪`);
          setActiveTasks(prev => prev.map(t => 
            t.id === task.id ? { ...t, notified: true } : t
          ));
        }
      });
    }, 5000);

    return () => clearInterval(pollInterval);
  }, [activeTasks]);

  // 提交任务的方法
  const submitHeavyTask = async (formData) => {
    const res = await axios.post('/submit-heavy-task', formData);
    const newTask = { id: res.data.task_id, status: 'PENDING', notified: false };
    setActiveTasks(prev => [...prev, newTask]);
    return newTask;
  };

  return (
    <TaskContext.Provider value={{ submitHeavyTask, activeTasks }}>
      {children}
    </TaskContext.Provider>
  );
}

export function useTask() {
  return useContext(TaskContext);
}

2. 在提交页面使用Context

// TaskSubmitPage.js
import { useState } from 'react';
import { useTask } from './TaskContext';

export default function TaskSubmitPage() {
  const [formData, setFormData] = useState({});
  const { submitHeavyTask } = useTask();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await submitHeavyTask(formData);
    // 提交后可直接跳转其他页面，任务状态会全局追踪
    window.location.href = '/dashboard';
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入组件 */}
      <input
        type="text"
        onChange={(e) => setFormData({ ...formData, input: e.target.value })}
      />
      <button type="submit">提交重型任务</button>
    </form>
  );
}

3. 在任意页面展示任务状态

// DashboardPage.js
import { useTask } from './TaskContext';

export default function DashboardPage() {
  const { activeTasks } = useTask();

  return (
    <div className="dashboard">
      <h2>正在运行/已完成任务</h2>
      {activeTasks.map(task => (
        <div key={task.id} className="task-item">
          <p>任务ID: {task.id}</p>
          <p>状态: {task.status}</p>
          {task.status === 'SUCCESS' && (
            <a href={task.result.file_url} target="_blank" rel="noopener noreferrer">
              下载生成文件
            </a>
          )}
        </div>
      ))}
    </div>
  );
}

可选优化：WebSocket实时推送 #

如果轮询的延迟或请求量不符合需求，可以改用WebSocket实现后端主动推送：

• 后端在任务完成时，通过WebSocket向前端发送任务完成消息。
• 前端建立WebSocket连接，监听消息，收到通知后立即更新状态并触发通知。

文档指引 #

• Celery官方文档：学习异步任务队列的配置、任务定义与状态追踪
• React Context API文档：掌握全局状态管理的实现方式
• Redux官方文档：复杂状态场景下的状态管理方案
• Axios官方文档：HTTP请求封装与错误处理
• WebSocket API文档：浏览器端WebSocket的使用方法

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