如何延长AJAX请求超时时间及实现操作进度条展示？

一、延长AJAX超时或取消超时 #

客户端设置 #

在你的$.ajax配置里添加timeout参数，直接指定超时时间（单位毫秒），设为0则表示不限制超时：

showProgressCursor();
$.ajax({
    type: "POST",
    url: strUrl,
    data: {accountId: byId("account-id").value},
    dataType: "JSON",
    timeout: 300000, // 示例：设置为5分钟，0表示无超时限制
    success: function (oResult, strTextStatus, internalResponse) {
        console.log("Success")
        _showTheResult(oResult, strTextStatus, internalResponse, allDataError);
        hideProgressCursor();
    },
    error: function(oResult) {
        manageError(oResult);
        console.log(oResult);
        hideProgressCursor();
    }
});

服务器端同步调整 #

只改客户端没用，服务器端也得对应修改超时限制：

• 若用Nginx反向代理，修改proxy_read_timeout为对应时长（比如300s）；
• 后端语言层面：PHP调整max_execution_time，Java Spring修改server.connection-timeout，Python Flask设置TIMEOUT参数等，具体看你使用的后端框架。

二、替换加载轮为进度条：轮询方案完全可行 #

轮询是处理长耗时任务进度展示的成熟方案，实现成本低、兼容性好，具体操作如下：

1. 服务器端改造 #

• 接收创建请求时，生成唯一任务ID，将任务状态（总需创建数、已完成数、任务状态：运行中/完成/失败）存入数据库或缓存；
• 启动异步任务处理元素创建，实时更新任务状态；
• 新增一个查询任务进度的接口，根据任务ID返回当前状态数据。

2. 前端实现代码示例 #

// 启动创建任务
function startElementCreation() {
    showProgressBar(); // 显示进度条组件
    $.ajax({
        type: "POST",
        url: strUrl, // 原创建接口，现在改为返回任务ID
        data: {accountId: byId("account-id").value},
        dataType: "JSON",
        success: function (res) {
            const taskId = res.taskId;
            // 每秒轮询一次进度
            const pollTimer = setInterval(() => {
                fetchTaskProgress(taskId, pollTimer);
            }, 1000);
        },
        error: function(err) {
            manageError(err);
            hideProgressBar();
        }
    });
}

// 查询任务进度并更新UI
function fetchTaskProgress(taskId, timer) {
    $.ajax({
        type: "GET",
        url: `/api/task/progress/${taskId}`, // 新增的进度查询接口
        dataType: "JSON",
        success: function (progressData) {
            // 计算进度百分比并更新进度条
            const progressPercent = (progressData.completed / progressData.total) * 100;
            updateProgressBar(progressPercent);

            // 任务完成或失败时停止轮询
            if (progressData.status === 'completed') {
                clearInterval(timer);
                _showTheResult(progressData.result, null, null, allDataError);
                hideProgressBar();
            } else if (progressData.status === 'failed') {
                clearInterval(timer);
                manageError(progressData.errorMsg);
                hideProgressBar();
            }
        },
        error: function(err) {
            clearInterval(timer);
            manageError(err);
            hideProgressBar();
        }
    });
}

// 进度条更新函数（示例）
function updateProgressBar(percent) {
    const bar = document.getElementById('progress-bar');
    bar.style.width = `${Math.round(percent)}%`;
    bar.textContent = `${Math.round(percent)}%`;
}

方案优缺点 #

• 优点：实现简单，无需复杂的服务器推送配置，所有浏览器都支持；
• 缺点：每秒一次的请求会有轻微服务器开销，但对于数百个元素的任务来说，这个开销完全可以忽略。

如果想要更高效的实时推送，也可以用Server-Sent Events（SSE）或WebSocket，但实现复杂度更高，轮询已经能满足你的需求。

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