Service Worker架构：高效令牌处理与网络请求同步实现

/**
 * 模拟异步获取认证令牌的函数。
 * 实际应用中会包含API调用、错误处理等逻辑。
 * @returns {Promise<string>} 解析为认证令牌字符串的Promise。
 */
async function fetchAuthToken() {
  console.log("正在获取新的认证令牌...");
  // 模拟网络请求延迟
  await new Promise(resolve => setTimeout(resolve, 1000));
  const newToken = "Bearer_New_Auth_Token_" + Date.now();
  console.log("令牌获取成功:", newToken);
  return newToken;
}

let currentTokenPromise = null; // 用于存储当前认证令牌的Promise

/**
 * 初始化或刷新认证令牌。
 * 该函数会更新 currentTokenPromise 变量。
 */
async function initializeOrRefreshToken() {
  console.log("开始初始化/刷新令牌...");
  currentTokenPromise = fetchAuthToken(); // 创建一个新的Promise并赋值
  try {
    await currentTokenPromise; // 等待令牌获取完成
    console.log("令牌已准备就绪或已刷新。");
  } catch (error) {
    console.error("令牌获取失败:", error);
    // 错误处理：将 currentTokenPromise 设置为 null，以便后续请求可以触发重试
    currentTokenPromise = null;
    // 可以在这里实现更复杂的错误重试逻辑
  }
}

// Service Worker启动时立即获取令牌
initializeOrRefreshToken();

// 设置定时器，每15分钟刷新一次令牌
const TOKEN_REFRESH_INTERVAL = 15 * 60 * 1000; // 15分钟
setInterval(() => {
  console.log("定时刷新令牌触发...");
  initializeOrRefreshToken();
}, TOKEN_REFRESH_INTERVAL);

/**
 * 发送一个需要认证令牌的网络请求。
 * @param {RequestInfo} input - 请求的URL或Request对象。
 * @param {RequestInit} [init] - 请求的选项。
 * @returns {Promise<Response>} 响应Promise。
 */
async function sendAuthenticatedRequest(input, init = {}) {
  // 如果 currentTokenPromise 为 null，说明令牌尚未初始化或上次获取失败，
  // 此时应尝试重新初始化令牌。这提供了首次失败后的重试机制。
  if (!currentTokenPromise) {
    console.warn("currentTokenPromise 为空，尝试重新初始化令牌...");
    await initializeOrRefreshToken(); // 尝试重新获取令牌
    // 如果 initializeOrRefreshToken 再次失败，currentTokenPromise 仍为 null，
    // 此时 await currentTokenPromise 将不会阻塞，而是直接执行下一步，
    // 导致请求在没有令牌的情况下发送或抛出错误。
    // 更好的做法是让 initializeOrRefreshToken 抛出错误，或返回一个拒绝的Promise。
    if (!currentTokenPromise) {
      throw new Error("无法获取认证令牌，请求无法发送。");
    }
  }

  const token = await currentTokenPromise; // 等待令牌可用
  console.log("使用令牌发送请求:", token);

  // 克隆请求头并添加认证信息
  const headers = new Headers(init.headers);
  headers.set('Authorization', token);

  return fetch(input, { ...init, headers });
}

// 示例：在Service Worker中拦截fetch事件并使用上述函数
self.addEventListener('fetch', event => {
  // 假设只有特定的API请求需要认证
  if (event.request.url.startsWith('/api/')) {
    event.respondWith(sendAuthenticatedRequest(event.request));
  } else {
    event.respondWith(fetch(event.request));
  }
});

// 模拟客户端发起请求
async function clientSideRequestExample() {
  try {
    console.log("客户端发起请求...");
    const response = await fetch('/api/data'); // 客户端通过Service Worker发送请求
    const data = await response.json();
    console.log("请求成功，数据:", data);
  } catch (error) {
    console.error("请求失败:", error);
  }
}

// 可以在 Service Worker 内部模拟调用，或者通过 postMessage 从主线程触发
// clientSideRequestExample();