XHR返回503状态码时如何自动重新发起AJAX请求

核心实现逻辑如下：

• 将AJAX请求封装为独立函数，重试时可直接复用请求逻辑
• 配置重试次数上限与重试间隔，避免无限重试、间隔过短导致的无效请求
• 触发503错误时先校验剩余重试次数，符合条件则延迟后重新发起请求

改造后代码示例 #

$(".apiGateway").on("click", function (e) {
    e.preventDefault();
    // 重试相关配置，可根据实际场景调整
    const MAX_RETRY_COUNT = 3; // 最大重试3次
    const RETRY_DELAY = 2000; // 重试间隔2000毫秒，适配服务端冷启动耗时
    let currentRetryTimes = 0;

    // 封装请求方法，重试时直接调用即可
    function sendApiRequest() {
        $.ajax({
            url: 'apiGatewayURL',
            method: 'GET',
            success: function(response) {
                // 原有请求成功后的业务逻辑写在这里
                console.log('请求成功', response);
            },
            error: function (xhr) {
                if (xhr.status === 503) {
                    if (currentRetryTimes < MAX_RETRY_COUNT) {
                        currentRetryTimes++;
                        console.log(`服务暂不可用，${RETRY_DELAY/1000}秒后发起第${currentRetryTimes}次重试`);
                        setTimeout(sendApiRequest, RETRY_DELAY);
                    } else {
                        // 重试全部失败后再提示用户
                        alert('服务暂时无法访问，请稍后再尝试');
                    }
                } else {
                    // 其他错误的原有处理逻辑
                    alert(`请求出错：${xhr.status} ${xhr.statusText}`);
                }
            }
        })
    }

    // 首次触发请求
    sendApiRequest();
})

配置调整说明 #

• 若AWS服务冷启动耗时较长，可适当调高RETRY_DELAY参数到3000毫秒
• 若需要更高的请求成功率，可将MAX_RETRY_COUNT调整为4-5次
• 控制台日志可根据需求删除，也可以替换为前端页面的加载提示，优化用户交互体验

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