通过封装 fetch 函数并结合 settimeout 与递归调用，可以实现请求超时后的自动重试。核心做法是启动一个定时器，若在规定时间内未收到响应则主动终止当前请求并触发重试逻辑，同时需处理网络异常以覆盖断网等场景。
如何设置具体的超时阈值和最大重试次数
在实现中，可以通过参数传入 timeout（毫秒）和 maxRetries)（整数）。每次发起请求时，创建一个 AbortController 实例，将其 signal 传给 fetch，并启动定时器。一旦超时，调用 controller.abort() 抛出错误，外层捕获后判断剩余重试次数，若大于零则递归调用自身。
function fetchWithRetry(url, options = {}) {
const { timeout = 5000, maxRetries = 3, ...fetchOptions } = options;
let retries = 0;
async function request() {
const controller = new AbortController();
const signal = controller.signal;
// 设置超时定时器
const timerId = setTimeout(() => {
controller.abort();
}, timeout);
try {
const response = await fetch(url, { ...fetchOptions, signal });
clearTimeout(timerId);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
clearTimeout(timerId);
// 如果是中止错误且还有重试机会，则重试
if (error.name === 'AbortError' && retries <h2>如何处理非超时类的网络异常并重试</h2><p>除了超时，网络波动导致的 <code>TypeError</code>（如 DNS 解析失败或连接拒绝）也需要纳入重试范围。在上述代码的 <code>catch</code> 块中，我们不仅检查 <code>AbortError</code>，还应捕获通用的网络错误。只要不是业务逻辑错误（如 404 或 500），都可以视为可重试的网络故障。通过统一在 <code>catch</code> 中判断 <code>retries</code> 计数，可以确保无论是超时还是断网，都能执行相同的重试策略。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Java 开发专家" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家" class="overflowclass">Java 开发专家</a>
<p class="overflowclass">精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo</p>
</div>
<a rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p><img src="https://img.php.cn/upload/article/001/242/473/179438635819003.png?x-oss-process=image/resize,p_40" alt="JavaScript Fetch API 怎么实现请求超时自动重试"></p><pre class="brush:php;toolbar:false;">// 修改后的 catch 块逻辑示意
} catch (error) {
clearTimeout(timerId);
// 区分业务错误和网络错误
const isNetworkError = error.name === 'AbortError' ||
error instanceof TypeError ||
!response.ok; // 注意：response.ok 已在前面判断，这里仅示意
if (isNetworkError && retries <h2>基于程序中某个输入、条件或结果的具体问题</h2><p>当 <code>fetch</code> 返回的状态码为 500 时，上述默认实现会直接抛出错误而不会重试，因为 <code>response.ok</code> 为 false 触发了提前抛出。如果希望将 5xx 错误也加入重试队列，需要在 <code>try</code> 块中移除对 <code>response.ok</code> 的即时报错，而是将 <code>response</code> 对象本身作为返回值的一部分，或者在 <code>catch</code> 中增加对 HTTP 状态码的判断逻辑，从而改变程序的最终输出结果。</p>
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
