订单提交后，按钮转了一会儿，页面弹出一句“请求超时，请重试”。

用户再点一次，依然超时。过了一会儿，订单列表里却出现了两笔订单。

前端明明收到了两次错误，为什么服务端执行了两次成功操作？

因为这里的“错误”，首先描述的是客户端没有正常拿到结果。它没有证明订单创建失败，更没有证明服务端什么也没做。

上一篇讨论了页面离开后如何停止请求。这次继续往前走一步：如果一个请求已经发出，客户端停止等待后，还能不能再发一次？

这个问题需要一起考虑请求语义、业务状态和服务端契约，不能仅靠请求工具里的一个 retry: 3 解决。

一次超时，可能发生在订单成功之后

先看一个完全可能出现的时间顺序：

服务端完成业务和客户端收到响应，是两件事。

响应还需要经过服务端输出、网关、网络和浏览器读取。任何一个环节延迟或中断，客户端都可能拿不到成功结果。

所以，超时后前端能够确定的是“这次没有按预期取得结果”，业务结果可能已经成功，也可能尚在处理，或者请求尚未到达服务端。

这也是为什么下面这种处理值得警惕：

export class RequestTimeoutError extends Error {
  constructor() {
    super('客户端等待超时，业务结果尚未确认');
    this.name = 'RequestTimeoutError';
  }
}


export class HttpError extends Error {
  constructor(response, data) {
    super(`HTTP ${response.status}`);
    this.name = 'HttpError';
    this.status = response.status;
    this.data = data;
    this.retryAfter = response.headers.get('retry-after');
  }
}


export async function requestJSON(url, {
  timeoutMs = 5000,
  signal,
  ...options
} = {}) {
  const controller = new AbortController();
  let timedOut = false;
  const onAbort = () => controller.abort(signal.reason);
  if (signal?.aborted) onAbort();
  else signal?.addEventListener('abort', onAbort, { once: true });


  const timer = setTimeout(() => {
    if (controller.signal.aborted) return;
    timedOut = true;
    controller.abort();
  }, timeoutMs);


  try {
    const response = await fetch(url, { ...options, signal: controller.signal });
    // 把响应体读取也放在超时范围内，而不只等待响应头。
    const text = await response.text();
    let data;
    try {
      data = JSON.parse(text);
    } catch {
      if (response.ok) throw new Error('响应体不是有效 JSON');
      data = null;
    }
    if (!response.ok) throw new HttpError(response, data);
    return data;
  } catch (error) {
    if (timedOut) throw new RequestTimeoutError();
    throw error;
  } finally {
    clearTimeout(timer);
    signal?.removeEventListener('abort', onAbort);
  }
}

const operation = {
  key: crypto.randomUUID(),
  payload: Object.freeze({ sku: 'book', quantity: 1 }),
  status: 'ready',
};

import { requestJSON } from './request-json.js';


async function submitOperation(operation) {
  operation.status = 'processing';
  try {
    const result = await requestJSON('/api/orders', {
      method: 'POST',
      timeoutMs: 500,
      headers: {
        'Content-Type': 'application/json',
        'Idempotency-Key': operation.key,
      },
      body: JSON.stringify(operation.payload),
    });


    if (!['processing', 'succeeded'].includes(result.status)) {
      throw new Error('接口返回了未识别的业务状态');
    }
    operation.status = result.status;
    return result;
  } catch (error) {
    // 此处统一保守地保留操作，具体拒绝原因可按接口契约进一步分类。
    operation.status = 'unknown';
    throw error;
  }
}

GET /api/order-operations/{operationId}

import { requestJSON } from './request-json.js';
import { retryRead } from './retry-read.js';


const result = await retryRead(({ signal }) => requestJSON(
  `/api/order-operations/${encodeURIComponent(operation.key)}`,
  { timeoutMs: 1500, signal },
), {
  maxAttempts: 3,
  baseDelayMs: 300,
  maxDelayMs: 3000,
  signal: pageController.signal,
});

退避上限 = min(单次等待上限, 基础等待 × 2^(已经失败的次数 - 1))
随机退避 = [0, 退避上限) 内的随机时长
实际等待 = max(随机退避, 服务端要求的最小等待时间)

test{ }

test{ }