Ajax请求后端长时任务时用户刷新页面，如何接收任务完成响应？

你当前使用的普通Ajax等待长任务响应的方案不可行。页面刷新后，原页面的所有网络连接、JS执行上下文都会被销毁，即便后端任务正常执行完成，也无法找到原连接返回响应结果。

通过「任务ID标记+状态查询」的逻辑可以实现你要的效果，具体改造如下：

后端改造 #

• 接收到启动长任务的请求后，立即生成唯一的任务ID，将任务ID与对应的任务状态（运行中/成功/失败）、执行结果、错误信息存储到Redis或数据库中
• 不要等长任务执行完成再返回响应，收到请求后立刻将任务ID返回给前端
• 新增任务状态查询接口，可根据传入的任务ID返回对应任务的最新状态与结果

前端改造 #

• 拿到后端返回的任务ID后，将ID存储到localStorage或sessionStorage中，保证页面刷新后数据不丢失
• 新增轮询逻辑，定期调用任务状态查询接口，获取对应任务的执行状态，检测到任务完成后展示结果并清除本地存储的任务ID
• 页面初始化时先检查本地存储是否存在未完成的任务ID，存在则自动启动轮询逻辑

// 提交表单启动任务逻辑
$.ajax({
    type: 'POST',
    url: '/add-user',
    data: {'data': JSON.stringify(data)},
    success: function(response){ 
        const taskId = response.task_id
        // 存储任务ID到本地
        localStorage.setItem('pending_task_id', taskId)
        // 启动轮询
        startTaskPolling(taskId)
    }
})

// 任务轮询逻辑
function startTaskPolling(taskId) {
    const pollTimer = setInterval(() => {
        $.ajax({
            type: 'GET',
            url: '/task/status',
            data: { task_id: taskId },
            success: (res) => {
                if (res.status === 'success') {
                    // 任务执行成功
                    console.log('任务执行完成：', res.message)
                    clearInterval(pollTimer)
                    localStorage.removeItem('pending_task_id')
                    // 这里补充你的业务提示逻辑
                } else if (res.status === 'failed') {
                    // 任务执行失败
                    console.log('任务执行失败：', res.error)
                    clearInterval(pollTimer)
                    localStorage.removeItem('pending_task_id')
                    // 这里补充错误提示逻辑
                }
                // 状态为running时继续轮询
            }
        })
    }, 3000) // 轮询间隔可根据需求调整，单位毫秒
}

// 页面加载时检查是否有未完成的任务
window.addEventListener('load', () => {
    const savedTaskId = localStorage.getItem('pending_task_id')
    if (savedTaskId) {
        startTaskPolling(savedTaskId)
    }
})

• 后端存储的任务状态要设置合理的过期时间，比如长任务最长耗时5分钟就设置10分钟过期，避免无效数据占用存储空间
• 如果对结果通知的实时性要求高，可以用WebSocket替代轮询，减少无效的HTTP请求
• 如果需要支持用户跨设备查看任务状态，可以将任务ID与用户账号绑定存储到后端，用户登录后主动拉取自己的运行中任务即可

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