Web API集成

// ✅ 特性检测：直接问浏览器"你有没有这个能力"
if ('IntersectionObserver' in window) {
  // 支持，放心用
} else {
  // 不支持，走降级方案
}

// ✅ 需要检测方法而不是属性时
if (typeof navigator.clipboard?.writeText === 'function') { ... }

// ✅ 检测某个属性是否可用（注意 undefined 与 null 的区别）
if ('share' in navigator) { ... }

// ❌ 永远不要这样写
const isChrome = /Chrome/.test(navigator.userAgent);
if (isChrome && version > 80) { ... }

// 先查权限，再决定要不要调用
async function ensureCamera() {
  if (!navigator.permissions?.query) return true;

  const status = await navigator.permissions.query({ name: 'camera' });

  if (status.state === 'denied') {
    // 已经被拒绝过，再调用也不会弹窗，直接引导用户去设置
    throw new Error('摄像头权限已被拒绝，请在浏览器设置中开启');
  }

  return true;
}

// 一个封装好的 XHR 请求（带上传进度）
function uploadFile(file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/upload');

    // 上传进度：这是 fetch 至今做不到的
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        onProgress?.(Math.round((e.loaded / e.total) * 100));
      }
    });

    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`HTTP ${xhr.status}`));
      }
    });

    xhr.addEventListener('error', () => reject(new Error('网络错误')));
    xhr.addEventListener('timeout', () => reject(new Error('请求超时')));

    xhr.timeout = 30000;
    xhr.send(file);
  });
}

// 场景：搜索框输入，只保留最后一次请求的结果
let controller = null;

async function search(keyword) {
  // 取消上一次未完成的请求
  controller?.abort();
  controller = new AbortController();

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controller.signal,
    });
    return await res.json();
  } catch (err) {
    // 主动取消会抛出一个名为 AbortError 的异常，要单独识别
    if (err.name === 'AbortError') return null;
    throw err;
  }
}

// 现代浏览器还提供了两个便捷方法
const signal1 = AbortSignal.timeout(5000); // 5 秒后自动中断
const signal2 = AbortSignal.any([signal1, userSignal]); // 任一触发即中断

// 同一个 signal 还能批量注销事件监听
const ctrl = new AbortController();
window.addEventListener('resize', onResize, { signal: ctrl.signal });
window.addEventListener('scroll', onScroll, { signal: ctrl.signal });
ctrl.abort(); // 一行注销全部

// 逐块读取响应流
async function streamRequest(url, onChunk) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);

  const reader = res.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // stream: true 保证多字节字符不会被截断
    buffer += decoder.decode(value, { stream: true });

    // 按行切分（SSE 格式以 \n\n 分隔事件）
    const lines = buffer.split('\n');
    buffer = lines.pop() ?? ''; // 最后一段可能不完整，留到下一轮

    for (const line of lines) {
      if (!line.startsWith('data: ')) continue;
      const payload = line.slice(6);
      if (payload === '[DONE]') return;
      onChunk(JSON.parse(payload));
    }
  }
}

// 一个极简的并发池：最多同时跑 limit 个任务
async function pool(tasks, limit = 5) {
  const results = new Array(tasks.length);
  let cursor = 0;

  async function worker() {
    while (cursor < tasks.length) {
      const index = cursor++;
      try {
        results[index] = { status: 'ok', value: await tasks[index]() };
      } catch (err) {
        results[index] = { status: 'error', reason: err };
      }
    }
  }

  // 启动 limit 个 worker，它们会共享同一个 cursor
  await Promise.all(Array.from({ length: limit }, worker));
  return results;
}

const tasks = urls.map((u) => () => fetch(u).then((r) => r.json()));
const all = await pool(tasks, 4);

// 带指数退避 + 抖动（jitter）的重试
function isRetryable(err, res) {
  if (err?.name === 'AbortError') return false;
  if (err) return true; // 网络层错误
  return res.status >= 500 || res.status === 429;
}

async function retry(fn, { times = 3, base = 300, max = 5000 } = {}) {
  let lastError;

  for (let attempt = 0; attempt <= times; attempt++) {
    try {
      return await fn();
    } catch (err) {
      lastError = err;
      if (attempt === times || !isRetryable(err)) break;

      // 指数退避 + 随机抖动，避免所有客户端同时重试
      const delay = Math.min(base * 2 ** attempt, max);
      const jitter = delay * 0.3 * Math.random();
      await new Promise((r) => setTimeout(r, delay + jitter));
    }
  }

  throw lastError;
}

const inflight = new Map();
const cache = new Map();

function request(key, fetcher, ttl = 30000) {
  // 1. 命中缓存
  const cached = cache.get(key);
  if (cached && Date.now() - cached.time < ttl) {
    return Promise.resolve(cached.value);
  }

  // 2. 已有相同请求在飞行中，直接复用
  if (inflight.has(key)) return inflight.get(key);

  const promise = fetcher()
    .then((value) => {
      cache.set(key, { value, time: Date.now() });
      return value;
    })
    .finally(() => inflight.delete(key));

  inflight.set(key, promise);
  return promise;
}

const es = new EventSource('/api/notifications/stream');

// 默认事件（服务端发送 "data: xxx"）
es.onmessage = (event) => {
  console.log('收到：', JSON.parse(event.data));
};

// 具名事件（服务端发送 "event: progress"）
es.addEventListener('progress', (event) => {
  updateProgressBar(JSON.parse(event.data));
});

// 连接建立
es.onopen = () => console.log('SSE 已连接');

// 出错（浏览器会自动重连，除非连接被永久关闭）
es.onerror = (err) => {
  if (es.readyState === EventSource.CLOSED) {
    console.log('连接已关闭，不再重连');
  }
};

// 页面卸载前主动关闭，避免浏览器报"连接被中断"
window.addEventListener('beforeunload', () => es.close());

class ReconnectingSocket {
  #url; #ws = null;
  #handlers = new Map();
  #retry = 0;
  #heartbeatTimer = null;
  #manualClose = false;

  constructor(url) {
    this.#url = url;
    this.#connect();
  }

  #connect() {
    this.#ws = new WebSocket(this.#url);

    this.#ws.onopen = () => {
      this.#retry = 0; // 连接成功，重置退避计数
      this.#startHeartbeat();
      this.#emit('open');
    };

    this.#ws.onmessage = (e) => {
      if (e.data === 'pong') return; // 心跳响应，不交给业务
      this.#emit('message', JSON.parse(e.data));
    };

    this.#ws.onclose = () => {
      this.#stopHeartbeat();
      this.#emit('close');
      if (!this.#manualClose) this.#scheduleReconnect();
    };

    this.#ws.onerror = () => this.#emit('error');
  }

  #scheduleReconnect() {
    // 指数退避，上限 30 秒
    const delay = Math.min(1000 * 2 ** this.#retry++, 30000);
    setTimeout(() => this.#connect(), delay);
  }

  #startHeartbeat() {
    // 每 20 秒发一次心跳，防止中间代理断开空闲连接
    this.#heartbeatTimer = setInterval(() => {
      if (this.#ws?.readyState === WebSocket.OPEN) this.#ws.send('ping');
    }, 20000);
  }

  #stopHeartbeat() {
    clearInterval(this.#heartbeatTimer);
  }

  on(type, fn) {
    if (!this.#handlers.has(type)) this.#handlers.set(type, new Set());
    this.#handlers.get(type).add(fn);
    return () => this.#handlers.get(type)?.delete(fn);
  }

  #emit(type, payload) {
    this.#handlers.get(type)?.forEach((fn) => fn(payload));
  }

  send(data) {
    if (this.#ws?.readyState !== WebSocket.OPEN) {
      // 生产环境应该放进一个待发送队列，连接恢复后重放
      throw new Error('连接未就绪');
    }
    this.#ws.send(JSON.stringify(data));
  }

  close() {
    this.#manualClose = true;
    this.#stopHeartbeat();
    this.#ws?.close();
  }
}

// 标签页 A：登录成功后广播
const channel = new BroadcastChannel('app-sync');
channel.postMessage({ type: 'login', user: { id: 1, name: '张玥' } });

// 标签页 B：接收并同步状态
const channel = new BroadcastChannel('app-sync');
channel.onmessage = (event) => {
  const { type, user } = event.data;
  if (type === 'login') store.setUser(user);
  if (type === 'logout') store.clear();
};

// 页面卸载时关闭，避免内存泄漏
window.addEventListener('beforeunload', () => channel.close());

// 一个安全的 localStorage 包装
const storage = {
  get(key, fallback = null) {
    try {
      const raw = localStorage.getItem(key);
      return raw === null ? fallback : JSON.parse(raw);
    } catch {
      // 数据损坏或存储不可用，返回兜底值而不是崩溃
      return fallback;
    }
  },

  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (err) {
      // 配额满了，清理一些非关键数据后重试一次
      if (err.name === 'QuotaExceededError') {
        cleanupOldKeys();
        try { localStorage.setItem(key, JSON.stringify(value)); return true; }
        catch { return false; }
      }
      return false;
    }
  },
};

// 极简 IndexedDB 封装
function openDB(name, version, upgrade) {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(name, version);

    req.onupgradeneeded = (event) => {
      // 只有版本号变化时才会执行，用来建表、建索引
      upgrade(req.result, event.oldVersion);
    };

    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

function tx(db, store, mode, fn) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(store, mode);
    const result = fn(transaction.objectStore(store));

    transaction.oncomplete = () => resolve(result?.result ?? result);
    transaction.onerror = () => reject(transaction.error);
    transaction.onabort = () => reject(transaction.error);
  });
}

// 使用
const db = await openDB('app', 1, (database) => {
  const store = database.createObjectStore('articles', { keyPath: 'id' });
  store.createIndex('byDate', 'createdAt');
});

await tx(db, 'articles', 'readwrite', (store) => {
  store.put({ id: 1, title: 'Web API 集成', createdAt: Date.now() });
});

if (navigator.storage?.estimate) {
  const { quota, usage } = await navigator.storage.estimate();
  const percent = ((usage / quota) * 100).toFixed(1);
  console.log(`已使用 ${(usage / 1048576).toFixed(1)}MB / ${(quota / 1048576).toFixed(1)}MB（${percent}%）`);
}

// 申请持久化存储：避免浏览器在空间紧张时自动清理
if (navigator.storage?.persist) {
  const granted = await navigator.storage.persist();
  console.log(granted ? '数据已被持久化保护' : '浏览器未授予持久化权限');
}

const observer = new IntersectionObserver(
  (entries, obs) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;

      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');

      // 加载完就停止观察，避免重复触发
      obs.unobserve(img);
    }
  },
  {
    root: null, // null 表示视口
    rootMargin: '200px 0px', // 提前 200px 开始加载
    threshold: 0, // 交叉比例达到 0 就触发
  }
);

document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // contentBoxSize 是内容盒子，borderBoxSize 含边框
    const { inlineSize: width } = entry.contentBoxSize[0];

    entry.target.dataset.size =
      width < 400 ? 'sm' : width < 800 ? 'md' : 'lg';
  }
});

document.querySelectorAll('.responsive-card').forEach((el) => ro.observe(el));

const mo = new MutationObserver((mutations) => {
  for (const m of mutations) {
    if (m.type === 'childList') {
      m.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) enhance(node);
      });
    }

    if (m.type === 'attributes' && m.attributeName === 'data-theme') {
      applyTheme(m.target.getAttribute('data-theme'));
    }
  }
});

mo.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['data-theme'],
  characterData: false,
});

// 采集核心 Web 指标
const metrics = {};

// LCP：最大内容绘制
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  metrics.lcp = entries[entries.length - 1].startTime;
}).observe({ type: 'largest-contentful-paint', buffered: true });

// CLS：累计布局偏移
let cls = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 忽略用户交互后产生的偏移
    if (!entry.hadRecentInput) cls += entry.value;
  }
  metrics.cls = cls;
}).observe({ type: 'layout-shift', buffered: true });

// 长任务：超过 50ms 的任务会阻塞交互
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(`长任务：${entry.duration.toFixed(0)}ms`, entry);
  }
}).observe({ type: 'longtask', buffered: true });

// 复制文本（必须由用户手势触发）
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    toast('已复制');
  } catch {
    // 降级到老方案
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    ta.remove();
  }
}

// 复制富文本 / 图片
const item = new ClipboardItem({
  'text/html': new Blob(['<b>加粗文本</b>'], { type: 'text/html' }),
  'text/plain': new Blob(['加粗文本'], { type: 'text/plain' }),
});
await navigator.clipboard.write([item]);

// 拖拽上传 + 粘贴上传
const dropzone = document.querySelector('.dropzone');

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 不阻止的话浏览器会直接打开文件
  dropzone.classList.add('dragging');
});

dropzone.addEventListener('dragleave', () => {
  dropzone.classList.remove('dragging');
});

dropzone.addEventListener('drop', async (e) => {
  e.preventDefault();
  dropzone.classList.remove('dragging');

  const files = [...e.dataTransfer.files];
  await uploadAll(files);
});

// 粘贴截图
document.addEventListener('paste', async (e) => {
  const items = [...(e.clipboardData?.items ?? [])];
  const imageItem = items.find((i) => i.type.startsWith('image/'));
  if (!imageItem) return;

  const file = imageItem.getAsFile();
  await upload(file);
});

// 打开摄像头
async function openCamera(videoEl) {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: { ideal: 1280 }, facingMode: 'user' },
    audio: false,
  });

  videoEl.srcObject = stream;
  await videoEl.play();

  // 用完必须停止所有轨道，否则摄像头指示灯会一直亮
  return () => stream.getTracks().forEach((t) => t.stop());
}

// 枚举设备
const devices = await navigator.mediaDevices.enumerateDevices();
const cameras = devices.filter((d) => d.kind === 'videoinput');

// 切换摄像头（手机前后置切换）
const stream = await navigator.mediaDevices.getUserMedia({
  video: { deviceId: { exact: cameras[1].deviceId } },
});

// 屏幕共享
const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,
});

// 用户点浏览器自带的"停止共享"按钮时，需要监听轨道结束事件
screenStream.getVideoTracks()[0].onended = () => {
  console.log('用户停止了屏幕共享');
  cleanup();
};

// 通知：必须先请求权限，且只能在用户手势后
async function notify(title, options) {
  if (!('Notification' in window)) return false;

  if (Notification.permission === 'default') {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return false;
  }

  if (Notification.permission !== 'granted') return false;

  const n = new Notification(title, {
    body: options.body,
    icon: '/icon.png',
    tag: options.tag, // 相同 tag 会替换而非叠加
  });

  n.onclick = () => {
    window.focus();
    n.close();
  };
  return true;
}

// 系统分享面板
async function share(data) {
  if (navigator.canShare?.(data) && navigator.share) {
    try {
      await navigator.share(data);
      return true;
    } catch (err) {
      // 用户取消分享会抛 AbortError，这不是错误
      if (err.name === 'AbortError') return false;
      throw err;
    }
  }

  // 降级：复制链接
  await copyText(data.url ?? data.text);
  return true;
}

// 注意：navigator.onLine 只能判断"有没有网络接口"
// 它无法判断"能不能真正访问到你的服务器"
function useOnlineStatus(onChange) {
  const update = () => onChange(navigator.onLine);

  window.addEventListener('online', update);
  window.addEventListener('offline', update);

  return () => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  };
}

// 更可靠的判断：定期发一个极小的探测请求
async function isReachable() {
  try {
    await fetch('/ping', {
      method: 'HEAD',
      cache: 'no-store',
      signal: AbortSignal.timeout(3000),
    });
    return true;
  } catch {
    return false;
  }
}

const buffer = new ArrayBuffer(1024 * 1024 * 10);

// 普通发送：复制一份，主线程的 buffer 还在
worker.postMessage({ buffer });

// 转移所有权：零拷贝，但主线程的 buffer 会变成 detached
worker.postMessage({ buffer }, [buffer]);
console.log(buffer.byteLength); // 0，已经被转移走了

// 把一个大任务拆成小块，在每帧空闲时执行一块
function processInChunks(items, process, onDone) {
  let index = 0;

  function run(deadline) {
    // 只要还有剩余时间，就继续处理
    while (index < items.length && deadline.timeRemaining() > 2) {
      process(items[index++]);
    }

    if (index < items.length) {
      requestIdleCallback(run, { timeout: 2000 });
    } else {
      onDone?.();
    }
  }

  requestIdleCallback(run, { timeout: 2000 });
}

// timeout 是兜底：如果一直没空闲，2 秒后强制执行
// 这在低端设备上很重要，否则任务可能永远不执行

// 页面隐藏或卸载时上报
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;

  const data = new Blob([JSON.stringify({
    duration: Date.now() - startTime,
    scrollDepth: getMaxScrollDepth(),
    path: location.pathname,
  })], { type: 'application/json' });

  // 返回 true 表示已排队，浏览器保证会尽力发送
  navigator.sendBeacon('/api/analytics', data);
});

// 组件里的"裸 fetch"，问题全都堆在这里
async function loadUser(id) {
  try {
    const res = await fetch(`/api/v2/users/${id}`, {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
    });

    // 忘了检查 res.ok，404 也会走到这里
    const data = await res.json();

    // 业务码判断散落各处，格式还不统一
    if (data.code !== 0) throw new Error(data.msg);

    return data.data;
  } catch (err) {
    // 所有错误混在一起，无法区分网络问题还是业务问题
    toast('加载失败');
    throw err;
  }
}

// 问题清单：
// 1. 没有超时，请求可能一直挂着
// 2. 没有取消，组件卸载后 setState 会报警告
// 3. 没有重试，偶发的 502 直接暴露给用户
// 4. 每个组件都要重复写这些代码

// ========== 1. 错误类型定义 ==========
class ApiError extends Error {
  constructor(type, message, meta = {}) {
    super(message);
    this.name = 'ApiError';
    this.type = type; // network | timeout | abort | http | biz | parse
    Object.assign(this, meta);
  }

  get retryable() {
    return this.type === 'network' || this.type === 'timeout'
      || (this.type === 'http' && this.status >= 500)
      || this.status === 429;
  }
}

// ========== 2. 客户端主体 ==========
class ApiClient {
  #baseURL;
  #timeout;
  #getToken;
  #onError;
  #inflight = new Map();

  constructor({ baseURL = '', timeout = 15000, getToken, onError } = {}) {
    this.#baseURL = baseURL;
    this.#timeout = timeout;
    this.#getToken = getToken ?? (() => null);
    this.#onError = onError ?? (() => {});
  }

  async request(path, options = {}) {
    const {
      method = 'GET',
      params,
      body,
      headers = {},
      signal: userSignal,
      timeout = this.#timeout,
      retry = 0,
      dedupe = method === 'GET',
      raw = false,
    } = options;

    // 拼 URL
    const url = new URL(this.#baseURL + path, location.origin);
    if (params) {
      for (const [k, v] of Object.entries(params)) {
        if (v !== undefined && v !== null) url.searchParams.set(k, v);
      }
    }

    // 请求去重
    const key = dedupe ? `${method}:${url}` : null;
    if (key && this.#inflight.has(key)) return this.#inflight.get(key);

    const promise = this.#execute(url, {
      method, body, headers, userSignal, timeout, retry, raw,
    }).finally(() => { if (key) this.#inflight.delete(key); });

    if (key) this.#inflight.set(key, promise);
    return promise;
  }

  async #execute(url, { method, body, headers, userSignal, timeout, retry, raw }) {
    let lastError;

    for (let attempt = 0; attempt <= retry; attempt++) {
      // 每次尝试都用新的 controller，避免复用已中断的 signal
      const controller = new AbortController();
      const timer = setTimeout(() => controller.abort(new Error('timeout')), timeout);
      userSignal?.addEventListener('abort', () => controller.abort(new Error('user-abort')), { once: true });

      try {
        const token = this.#getToken();
        const response = await fetch(url, {
          method,
          signal: controller.signal,
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            ...headers,
            ...(token ? { Authorization: `Bearer ${token}` } : {}),
          },
          body: body === undefined ? undefined : JSON.stringify(body),
        });

        clearTimeout(timer);

        // HTTP 层错误
        if (!response.ok) {
          throw new ApiError('http', `HTTP ${response.status}`, {
            status: response.status,
            url: String(url),
          });
        }

        if (raw) return response;

        // 解析层错误
        let payload;
        try {
          payload = await response.json();
        } catch {
          throw new ApiError('parse', '响应不是合法的 JSON');
        }

        // 业务层错误（约定 code === 0 为成功）
        if (payload && typeof payload === 'object' && 'code' in payload && payload.code !== 0) {
          throw new ApiError('biz', payload.message ?? '业务处理失败', {
            code: payload.code,
            payload,
          });
        }

        return payload?.data ?? payload;

      } catch (err) {
        clearTimeout(timer);
        lastError = this.#normalize(err, url);

        // 不可重试或已是最后一次，直接抛出
        if (attempt === retry || !lastError.retryable) break;

        // 指数退避 + 抖动
        const delay = Math.min(400 * 2 ** attempt, 6000);
        await new Promise((r) => setTimeout(r, delay + delay * 0.3 * Math.random()));
      }
    }

    this.#onError(lastError);
    throw lastError;
  }

  #normalize(err, url) {
    if (err instanceof ApiError) return err;

    if (err.name === 'AbortError') {
      // 区分"超时中断"和"用户主动取消"
      const isTimeout = err.message === 'timeout';
      return new ApiError(isTimeout ? 'timeout' : 'abort',
        isTimeout ? '请求超时' : '请求已取消', { url: String(url) });
    }

    return new ApiError('network', '网络连接异常', { url: String(url), cause: err });
  }

  // 便捷方法
  get(path, options) { return this.request(path, { ...options, method: 'GET' }); }
  post(path, body, options) { return this.request(path, { ...options, method: 'POST', body }); }
  put(path, body, options) { return this.request(path, { ...options, method: 'PUT', body }); }
  delete(path, options) { return this.request(path, { ...options, method: 'DELETE' }); }
}

// ========== 3. 实例化与使用 ==========
const api = new ApiClient({
  baseURL: '/api/v2',
  timeout: 15000,
  getToken: () => tokenStore.accessToken,
  onError: (err) => reportError(err),
});

// 领域层：把接口语义化
const userApi = {
  profile: (id, { signal } = {}) => api.get(`/users/${id}`, { signal }),
  update: (id, patch) => api.put(`/users/${id}`, patch),
  list: (params) => api.get('/users', { params }),
};

// 组件层：只关心数据和错误提示
async function loadUser(id) {
  const controller = new AbortController();
  onUnmount(() => controller.abort());

  try {
    return await userApi.profile(id, { signal: controller.signal });
  } catch (err) {
    if (err.type === 'abort') return null; // 主动取消不提示
    toast(err.message);
    return null;
  }
}