如何为提交表单到电子表格的fetch请求添加失败重试功能

注意：fetch 原生只有网络层面的错误（如断网、跨域拦截、DNS解析失败）才会进入catch回调，HTTP 4xx/5xx类的业务错误不会触发catch，需要手动校验响应状态。

实现思路 #

• 先配置可自定义的重试参数：最大请求次数、重试间隔时长，避免无限重试或者请求过于密集
• 将请求逻辑封装为递归函数，请求失败且还有剩余重试次数时，等待指定时长后重新发起请求
• 重试次数耗尽后再弹出错误提示
• 提前提取表单数据，避免重试间隔用户修改表单内容导致多次提交数据不一致

完整实现代码 #

form.addEventListener('submit', e => {
    e.preventDefault()
    // 可根据业务需求调整以下两个配置参数
    const MAX_REQUEST_TIMES = 3 // 最多发起3次请求，包含首次请求+2次重试
    const RETRY_DELAY = 1000 // 每次重试间隔1000毫秒（即1秒）
    const formData = new FormData(form) // 提前冻结提交时的表单数据
    
    // 封装带重试逻辑的请求函数
    function sendRequest(remainingTimes) {
        fetch(scriptURL, { 
            method: 'POST', 
            body: formData
        })
        .then(response => { 
            // 手动校验HTTP响应状态，非2xx状态码视为请求失败
            if (!response.ok) {
                throw new Error(`请求异常，状态码：${response.status}`)
            }
            // 请求成功的原有逻辑
            document.getElementById("pasakay-form").reset();
            window.location.href='https://digitsorani.net/mulawin-pasahero-success/';
        })
        .catch(error =>  {
            if (remainingTimes > 0) {
                // 还有剩余请求次数，延迟后重试
                setTimeout(() => {
                    sendRequest(remainingTimes - 1)
                }, RETRY_DELAY)
            } else {
                // 所有次数耗尽，弹出错误提示
                alert("Try Again")
            }
        }); 
    }

    // 首次发起请求
    sendRequest(MAX_REQUEST_TIMES - 1)
});

补充说明 #

• 如果需要更精细化的重试策略，可以在catch中判断错误类型，比如仅网络错误触发重试，业务参数错误直接提示用户修改内容，不需要重试。
• 请先确认后端接口支持重复提交相同的表单数据不会产生异常，避免重试导致多条重复数据入库。

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