JS fetch异步请求依赖前序结果的动态请求头时间同步咨询

不需要改用同步模式的XMLHttpRequest，同步请求会阻塞浏览器主线程，导致页面卡顿、交互无响应，属于已被Web规范标记为不推荐的实现方式。你之前异步方案失效的核心原因是：server_time函数没有返回fetch生成的Promise对象，也没有将拿到的服务器时间作为返回值抛出，自然无法在后续流程中拿到结果。

正确实现步骤 #

1. 改造服务器时间获取方法 #

确保方法返回Promise，且将拿到的时间结果作为resolve值返回：

async function getServerTime() {
  const timeReqHeaders = new Headers();
  timeReqHeaders.append("Content-Type", "application/json");
  const response = await fetch("myserver/time", {
    method: 'GET',
    headers: timeReqHeaders,
    redirect: 'follow'
  });
  if (!response.ok) throw new Error(`获取服务器时间失败，状态码${response.status}`);
  // 返回拿到的服务器时间
  return await response.text();
}

2. 封装通用请求方法，保证每次请求前拉取最新时间 #

不要全局复用固定的headers对象，每次发请求前先等待时间接口返回，再动态构造带最新时间的请求头发送业务请求：

/**
 * 自动注入最新服务器时间的请求封装
 * @param {string} url 请求地址
 * @param {RequestInit} reqConfig fetch原生请求配置
 */
async function sendRequest(url, reqConfig = {}) {
  // 等待最新服务器时间返回，才会执行后续逻辑
  const latestServerTime = await getServerTime();
  // 构造本次请求的最新请求头
  const finalHeaders = new Headers(reqConfig.headers || {});
  finalHeaders.set("Content-Type", "application/json");
  // 替换成你业务实际要求的时间请求头字段名
  finalHeaders.set("X-Server-Time", latestServerTime);

  // 发送实际业务请求
  const bizResponse = await fetch(url, {
    ...reqConfig,
    headers: finalHeaders,
    redirect: reqConfig.redirect || 'follow'
  });
  const result = await bizResponse.text();
  if (!bizResponse.ok) throw new Error(`请求失败：${result}`);
  return result;
}

3. 业务调用示例 #

调用时加await即可保证执行顺序，后续代码一定在前序所有请求（拉时间+业务请求）完成后才会执行：

async function runBiz() {
  try {
    // 第一次业务请求，自动拉取最新时间
    const res1 = await sendRequest("myserver/biz/1", { method: "GET" });
    console.log("接口1返回：", res1);

    // 第二次业务请求，会重新拉取最新的服务器时间，不会复用旧值
    const res2 = await sendRequest("myserver/biz/2", {
      method: "POST",
      body: JSON.stringify({ name: "test" })
    });
    console.log("接口2返回：", res2);
  } catch (err) {
    console.log("请求异常：", err);
  }
}

runBiz();

注意事项 #

• 如果你偏好原生Promise链式写法，不使用async/await，只要保证每次在getServerTime()的.then回调里执行后续请求逻辑即可，同样可以保证执行顺序
• 之前async/await方案不生效，通常是两个问题导致：一是异步函数没有返回Promise/实际结果，二是调用时没有加await、也没有通过.then()接收异步结果
• 不要提前创建全局的headers对象复用，每次请求的时间值是动态变化的，必须在拿到最新时间后重新构造请求头

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