React应用中Axios请求出现425 Too Early错误的解决方法

425状态码的核心原因是：第二个POST请求虽然返回了newOutputId，但服务器端的翻译任务还在异步处理中，此时直接发起GET请求查询内容，服务器还未准备好返回结果。单纯的固定时长setTimeout无法适配服务器处理时间的波动，需要用带指数退避的轮询机制来解决。

具体修复步骤 #

• 编写带重试逻辑的轮询函数，每次请求失败后延迟时间递增，避免频繁请求给服务器造成压力
• 替换原有的单次GET请求，改用轮询函数直到获取到结果或达到最大重试次数

修改后的完整代码 #

const handleUpload = async () => {
    setIsLoading(true);
    if (selectedFile && selectedLanguage) {
        const formData = new FormData();
        formData.append("file", selectedFile);
        formData.append("language", String(selectedLanguage?.code));

        try {
            const baseURL = process.env.REACT_APP_API_URL;

            // 第一次上传文件请求
            const uploadResponse = await axios.post(
                `${baseURL}/upload/`,
                formData,
                {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                }
            );

            const newId = uploadResponse.data.public_id;
            setSelectedId(newId);

            // 第二次添加翻译任务请求
            const addTranslation = await axios.post(
                `${baseURL}/upload/sources/${newId}/outputs`,
                { language: selectedLanguage.code }
            );
            const newOutputId = addTranslation.data.id;

            // 带指数退避的轮询获取翻译内容
            const fetchTranslationWithRetry = async (outputId, maxRetries = 5, initialDelay = 1000) => {
                let retries = 0;
                let delay = initialDelay;

                while (retries < maxRetries) {
                    try {
                        const response = await axios.get(`${baseURL}/upload/outputs/${outputId}/contents/`);
                        return response.data.url;
                    } catch (error) {
                        if (error.response?.status === 425) {
                            retries++;
                            // 指数退避：每次延迟时间翻倍
                            await new Promise(resolve => setTimeout(resolve, delay));
                            delay *= 2;
                        } else {
                            // 其他错误直接抛出
                            throw error;
                        }
                    }
                }
                throw new Error("达到最大重试次数，无法获取翻译内容");
            };

            try {
                const newVideoUrl = await fetchTranslationWithRetry(newOutputId);
                setVideoUrl(newVideoUrl);
            } catch (error) {
                console.error("获取翻译内容失败:", error);
                // 可在此添加用户提示，比如setErrorMsg("翻译内容生成超时，请稍后重试")
            }
        } catch (error) {
            console.error("文件上传失败:", error);
        } finally {
            setIsLoading(false);
        }
    }
};

关键说明 #

• 指数退避策略：第一次失败后等待1秒，第二次2秒，第三次4秒……以此类推，既给服务器足够的处理时间，又避免短时间内重复请求导致资源浪费
• 重试次数限制：设置最大重试次数（示例中为5次），防止无限轮询
• 错误区分处理：只对425状态码进行重试，其他错误（比如404、500）直接抛出，便于排查其他问题

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