0

0

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

碧海醫心

碧海醫心

发布时间:2026-02-12 12:05:31

|

420人浏览过

|

来源于php中文网

原创

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

本文详解如何在 django 中通过 ajax 轮询 celery 异步任务状态,动态获取数据库进度数据并在前端实时渲染,涵盖后端视图设计、任务状态判断、前端递归轮询实现及关键注意事项。

在构建需长时间运行后台任务(如批量数据导入、ETL 处理)的 Django 应用时,用户常需感知任务执行进度而非被动等待。Celery 是理想的异步任务框架,但其本身不提供实时通信能力;此时结合 Ajax 轮询(Polling)是一种轻量、兼容性强且无需额外基础设施(如 WebSocket 服务)的解决方案。本文将完整演示如何安全、高效地实现“任务触发 → 状态轮询 → 进度/结果实时更新”的闭环流程。

✅ 后端:精准识别任务生命周期并返回结构化响应

核心在于利用 Celery 的 AsyncResult 对象读取任务真实状态,并避免直接调用 .get() 阻塞请求(尤其在 PROGRESS 状态下可能引发超时或重复查询)。应依据 async_result.state 字段区分处理逻辑:

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

def dashboard(request):
    # 触发异步任务(确保 task 已正确配置 track_started=True, update_state=True)
    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 = AsyncResult(task_id)

    # 根据 Celery 任务状态返回语义化响应
    if async_result.state == 'PENDING':
        return JsonResponse({'status': 'pending', 'data': '任务尚未开始'})
    elif async_result.state == 'STARTED':
        return JsonResponse({'status': 'in_progress', 'data': '任务已启动'})
    elif async_result.state == 'PROGRESS':
        # ✅ 推荐:任务主动上报进度(见下方注意事项)
        progress_info = async_result.info or {}
        return JsonResponse({
            'status': 'in_progress',
            'data': progress_info.get('current', '处理中...'),
            'percent': progress_info.get('percent', 0)
        })
    elif async_result.state == 'SUCCESS':
        # 此处可查询最新数据库结果,而非直接返回 task.return_value
        # (避免大对象序列化/网络传输开销,也更符合“实时查库”需求)
        latest_data = get_latest_db_snapshot()  # 自定义函数,按需实现
        return JsonResponse({'status': 'completed', 'data': latest_data})
    elif async_result.state in ['FAILURE', 'REVOKED']:
        error_msg = str(async_result.info) if async_result.info else '任务执行失败'
        return JsonResponse({'status': 'failed', 'error': error_msg})
    else:
        return JsonResponse({'status': 'unknown', 'state': async_result.state})
⚠️ 关键注意事项:Celery 默认不启用 PROGRESS 状态,需在任务中显式调用 self.update_state() 并传入 state='PROGRESS' 和 meta 字典;生产环境务必为 AsyncResult 添加超时保护(如 async_result.get(timeout=5, propagate=False)),防止轮询请求卡死;避免在 current_data 视图中执行耗时数据库聚合操作,建议缓存中间结果或使用轻量 COUNT/SELECT 查询。

✅ 前端:递归轮询 + 渐进式 UI 更新

使用 setTimeout 实现非阻塞递归轮询,比 setInterval 更可控(避免请求堆积),并配合状态码驱动 DOM 更新:

飞桨PaddlePaddle
飞桨PaddlePaddle

飞桨PaddlePaddle开发者社区与布道,与社区共同进步

下载
<!-- template.html -->
<div id="status-area">
  <p>&#20219;&#21153;&#29366;&#24577;&#65306;<span id="status-text">&#21021;&#22987;&#21270;&#20013;...</span></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 },
        timeout: 10000, // 10&#31186;&#36229;&#26102;&#65292;&#38450;&#26381;&#21153;&#26080;&#21709;&#24212;
        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('&#31561;&#24453;&#35843;&#24230;...');
                    break;
                case 'in_progress':
                    $statusText.text('&#25191;&#34892;&#20013;');
                    $progressBar.show();
                    $progress.val(response.percent || 0);
                    $progressText.text(`${response.percent || 0}%`);
                    // &#9989; 1&#31186;&#21518;&#32487;&#32493;&#36718;&#35810;
                    setTimeout(() => pollTaskStatus(taskId), 1000);
                    break;
                case 'completed':
                    $statusText.text('&#9989; &#25191;&#34892;&#23436;&#25104;');
                    $progressBar.hide();
                    $resultArea.show().html('<strong>&#26368;&#26032;&#25968;&#25454;&#65306;</strong>' + 
                        (typeof response.data === 'string' ? response.data : JSON.stringify(response.data)));
                    break;
                case 'failed':
                    $statusText.text('&#10060; &#25191;&#34892;&#22833;&#36133;&#65306;' + (response.error || '&#26410;&#30693;&#38169;&#35823;'));
                    break;
                default:
                    $statusText.text('&#29366;&#24577;&#26410;&#30693;&#65306;' + response.status);
            }
        },
        error: function(xhr, status, error) {
            if (status === 'timeout') {
                $statusText.text('&#9888;&#65039; &#35831;&#27714;&#36229;&#26102;&#65292;&#35831;&#26816;&#26597;&#26381;&#21153;&#29366;&#24577;');
            } else if (xhr.status === 0) {
                $statusText.text('&#9888;&#65039; &#32593;&#32476;&#36830;&#25509;&#24322;&#24120;');
            } else {
                $statusText.text(`&#10060; &#26381;&#21153;&#22120;&#38169;&#35823;&#65306;${xhr.status} ${xhr.statusText}`);
            }
        }
    });
}

$(document).ready(function() {
    const taskId = '{{ task_id }}';
    if (taskId) {
        pollTaskStatus(taskId);
    } else {
        $('#status-text').text('&#26410;&#33719;&#21462;&#21040;&#20219;&#21153;ID');
    }
});
</script>

✅ 总结与演进建议

当前方案(Ajax Polling)简单可靠,适用于中小规模、低频更新场景。但需注意其固有局限:

立即学习前端免费学习笔记(深入)”;

  • 资源开销:高频轮询增加服务器负载与网络流量;
  • 延迟感知:最小更新间隔受轮询周期限制(如 1s),非真正实时;
  • 状态一致性:需严格校验 AsyncResult 的 state 与 info,避免竞态。

如需更高实时性与扩展性,可逐步演进:
? 升级为 Server-Sent Events (SSE):单向长连接,服务端主动推送,浏览器原生支持;
? 接入 Django Channels + WebSocket:双向实时通信,适合多用户协同、高频交互场景;
? 引入 Redis Pub/Sub 或消息队列:解耦任务与通知,提升系统可维护性。

最终,选择何种方案应基于实际业务 SLA、团队技术栈与运维成本综合权衡——而扎实掌握轮询模式,正是迈向更高级实时架构的坚实起点。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python Web 框架 Django 深度开发
Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧,包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例,帮助学习者掌握 使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

56

2026.02.04

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

163

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

164

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

119

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

243

2024.09.24

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

410

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

586

2023.08.10

2026春节习俗大全
2026春节习俗大全

本专题整合了2026春节习俗大全,阅读专题下面的文章了解更多详细内容。

189

2026.02.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 11万人学习

CSS3 教程
CSS3 教程

共18课时 | 5.4万人学习

Vue 教程
Vue 教程

共42课时 | 8.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号