如何使用 Ajax 轮询 Celery 任务状态并实时更新 Django 前端-Python教程-PHP中文网

如何使用 Ajax 轮询 Celery 任务状态并实时更新 Django 前端

本文详解如何在 django 中结合 celery 异步任务与 ajax 轮询，实现数据库填充过程的实时进度反馈——包括后端状态判断、json 响应设计、前端递归轮询及 dom 动态更新。

在构建需长时间运行后台任务（如批量数据导入、报表生成）的 Django 应用时，用户不应面对空白页或无响应等待。Celery 提供了强大的异步执行能力，而 Ajax 轮询则是轻量、兼容性好且无需 WebSocket 基础设施的实时状态同步方案。本文将带你完整实现：启动 Celery 任务 → 前端持续轮询 → 根据任务状态（PROGRESS/SUCCESS/FAILURE）动态渲染进度或结果。

✅ 后端：提供结构化状态接口

关键在于 current_data 视图必须返回可被前端明确解析的状态标识，而非仅依赖 AsyncResult.get()（该方法会阻塞直至完成，违背轮询本意）。应始终使用 async_result.state 判断当前状态，并按需返回阶段性数据（如已处理条数、最新统计摘要等），而非仅最终结果。

# views.py
from celery import current_app
from django.http import JsonResponse
from django.shortcuts import render

def dashboard(request):
    # 启动任务（确保 task 已配置 track_started=True 和 update_state()）
    result = prepare_database.delay()
    return render(request, 'appname/template.html', {'task_id': result.id})

def current_data(request):
    task_id = request.GET.get('task_id')
    if not task_id:
        return JsonResponse({'status': 'no_task'}, status=400)

    async_result = current_app.AsyncResult(task_id)

    # 根据 Celery 内置状态码返回结构化响应
    if async_result.state == 'PENDING':
        return JsonResponse({'status': 'pending', 'progress': 0})
    elif async_result.state == 'PROGRESS':
        # 假设你的 task 在 update_state() 中传递了 'processed' 字段
        progress_data = async_result.info or {}
        return JsonResponse({
            'status': 'in_progress',
            'progress': progress_data.get('processed', 0),
            'message': progress_data.get('message', 'Processing...')
        })
    elif async_result.state == 'SUCCESS':
        # 此处可返回最终结果摘要，或引导前端跳转/刷新
        return JsonResponse({
            'status': 'completed',
            'data': async_result.result  # 或从 DB 查询最新数据
        })
    elif async_result.state in ['FAILURE', 'REVOKED']:
        return JsonResponse({
            'status': 'error',
            'reason': str(async_result.info) if async_result.info else 'Task failed'
        })
    else:
        return JsonResponse({'status': 'unknown', 'state': async_result.state})

⚠️ 注意事项：确保 Celery Task 显式调用 self.update_state(state='PROGRESS', meta={...})（需在 @shared_task(bind=True) 下）； AsyncResult.info 是 meta 参数的镜像，用于传递进度细节；避免在 current_data 中调用 async_result.get()，它会阻塞请求线程，导致轮询堆积。

✅ 前端：递归轮询 + 智能 DOM 更新

前端使用 setTimeout 实现非阻塞递归轮询，并依据响应 status 字段执行不同逻辑：显示加载动画、更新进度条、插入实时数据或终止轮询。

精英前端设计-专业版

企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载

<!-- template.html -->
<div id="status-area">
  <p id="status-text">Initializing...</p>
  <div id="progress-bar" style="display:none;">
    <progress id="progress" value="0" max="100"></progress><span id="progress-text">0%</span>
  </div>
  <div id="result-area" style="display:none;"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
function pollTaskStatus(taskId) {
  $.ajax({
    url: '/current_data/',
    method: 'GET',
    data: { task_id: taskId },
    dataType: 'json',
    timeout: 10000, // 防止网络异常卡死
    success: function(response) {
      const $statusText = $('#status-text');
      const $progressBar = $('#progress-bar');
      const $progress = $('#progress');
      const $progressText = $('#progress-text');
      const $resultArea = $('#result-area');

      switch(response.status) {
        case 'pending':
          $statusText.text('Task queued, waiting to start...');
          $progressBar.hide();
          $resultArea.hide();
          setTimeout(() => pollTaskStatus(taskId), 2000);
          break;

        case 'in_progress':
          $statusText.text(`Processing: ${response.message}`);
          $progressBar.show();
          // 示例：假设 processed 是 0~100 的百分比值
          const pct = Math.min(100, response.progress || 0);
          $progress.val(pct);
          $progressText.text(`${pct}%`);
          setTimeout(() => pollTaskStatus(taskId), 1500); // 动态调整间隔更优
          break;

        case 'completed':
          $statusText.text('✅ Task completed!');
          $progressBar.hide();
          $resultArea.html(`<pre class="brush:php;toolbar:false;">${JSON.stringify(response.data, null, 2)}</script>

`).show(); break; case 'error': $statusText.html(`❌ Error: ${response.reason}`); $progressBar.hide(); $resultArea.hide(); break; default: $statusText.text(`Unknown status: ${response.status}`); } }, error: function(xhr, status, error) { if (status === 'timeout') { $statusText.text('⚠️ Request timed out. Retrying...'); } else { $statusText.text(`Network error: ${error}`); } setTimeout(() => pollTaskStatus(taskId), 3000); } }); } $(document).ready(function() { const taskId = '{{ task_id }}'; if (taskId) { pollTaskStatus(taskId); } });