HTTP 基础 → XMLHttpRequest 演进 → Fetch 标准 → Request/Response/Headers
   → AbortController 取消 → Web Streams API → Service Worker → Cache API
   → 缓存策略 → CORS 与认证 → GraphQL → 重试/熔断/限流 → 生产级框架

// XHR 的典型写法
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.onerror = function () {
  console.error('请求失败');
};
xhr.send();

// GET 请求
const response = await fetch('/api/users');
const data = await response.json();
console.log(data);

const response = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 }),
});
const data = await response.json();

const response = await fetch(url, {
  method: 'POST',                  // HTTP 方法
  headers: {                       // 请求头
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
  },
  body: JSON.stringify(data),      // 请求体(string/FormData/Blob/ArrayBuffer/Uint8Array/ReadableStream)
  mode: 'cors',                    // 'cors' | 'no-cors' | 'same-origin' | 'navigate' | 'websocket'
  credentials: 'same-origin',      // 'omit' | 'same-origin' | 'include'
  cache: 'default',                // 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached'
  redirect: 'follow',              // 'follow' | 'error' | 'manual'
  referrer: 'client',              // 来源 URL
  referrerPolicy: 'no-referrer-when-downgrade', // 来源策略
  integrity: 'sha256-abc...',      // 子资源完整性校验
  keepalive: false,                // 页面卸载后是否保持请求
  signal: controller.signal,       // AbortSignal,用于取消
  priority: 'auto',                // 'high' | 'low' | 'auto'
});

// Fetch 不会对 HTTP 错误状态码抛出异常!
const response = await fetch('/api/users/999');
if (!response.ok) {
  // response.ok === (response.status >= 200 && response.status < 300)
  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();

const response = await fetch('/api/data');

// 1. JSON
const json = await response.json();

// 2. 文本
const text = await response.text();

// 3. Blob(二进制大对象)
const blob = await response.blob();
const url = URL.createObjectURL(blob);

// 4. ArrayBuffer(原始字节)
const buffer = await response.arrayBuffer();

// 5. FormData(用于 multipart/form-data 解析)
const formData = await response.formData();

// 6. ReadableStream(流式读取)
const reader = response.body.getReader();

// 注意:响应体只能读取一次!
// 如需多次读取,先 clone()
const cloned = response.clone();
const json1 = await response.json();
const json2 = await cloned.json();

const response = await fetch('/api/data');

// 错误:第二次读取会抛出 TypeError
const text = await response.text();
const json = await response.json(); // TypeError: Body has already been consumed

// 正确:使用 clone
const cloned = response.clone();
const text = await response.text();
const json = await cloned.json();

const req = new Request('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer abc123',
  },
  body: JSON.stringify({ name: 'Alice' }),
  mode: 'cors',
  credentials: 'include',
});

// 传递给 fetch
const response = await fetch(req);

const req = new Request('https://api.example.com/users?page=1', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' }),
});

req.method;         // 'POST'
req.url;            // 'https://api.example.com/users?page=1'
req.headers;        // Headers 对象
req.body;           // ReadableStream
req.mode;           // 'cors'
req.credentials;    // 'same-origin'
req.cache;          // 'default'
req.redirect;       // 'follow'
req.referrer;       // 'about:client'
req.referrerPolicy; // ''
req.signal;         // AbortSignal
req.keepalive;      // false
req.integrity;      // ''

const req1 = new Request('/api/data', { method: 'POST', body: 'hello' });
const req2 = req1.clone(); // 深拷贝,可独立使用

// 注意:body 是 ReadableStream,克隆后两者都可用于 fetch
await fetch(req1);
await fetch(req2);

const baseReq = new Request('/api/users', {
  headers: { 'Authorization': 'Bearer token' },
});

// 派生新 Request,继承并覆盖部分字段
const newReq = new Request(baseReq, {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice' }),
});

// newReq 继承了 baseReq 的 headers,同时添加新字段
console.log(newReq.headers.get('Authorization')); // 'Bearer token'

const req = new Request('/api/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice' }),
});

const text = await req.text();
const json = await req.json();
const blob = await req.blob();
const buffer = await req.arrayBuffer();

// 手动构造 Response(Service Worker 中常用)
const response = new Response(JSON.stringify({ name: 'Alice' }), {
  status: 200,
  statusText: 'OK',
  headers: { 'Content-Type': 'application/json' },
});

const data = await response.json();

const response = await fetch('/api/data');

response.status;      // 200
response.statusText;  // 'OK'
response.ok;          // true (status 在 200-299 之间)
response.headers;     // Headers 对象
response.url;         // 最终 URL(重定向后)
response.redirected;  // 是否经历过重定向
response.type;        // 'basic' | 'cors' | 'opaque' | 'error'
response.body;        // ReadableStream | null
response.bodyUsed;    // boolean,响应体是否已被消费

// 1. basic:同源响应
const r1 = await fetch('/api/data');
console.log(r1.type); // 'basic'

// 2. cors:跨域响应(可读大部分头部)
const r2 = await fetch('https://api.example.com/data', { mode: 'cors' });
console.log(r2.type); // 'cors'

// 3. opaque:no-cors 模式的跨域响应(几乎不可读)
const r3 = await fetch('https://third-party.com/data', { mode: 'no-cors' });
console.log(r3.type); // 'opaque'
console.log(r3.status); // 0
console.log(r3.body);   // null

// 4. error:网络错误
const r4 = new Response(null, { status: 0, statusText: '' });
console.log(r4.type); // 'error'

// 1. Response.error()
const errResp = Response.error();

// 2. Response.redirect(url, status)
const redirectResp = Response.redirect('https://example.com', 302);

// 3. Response.json()(ES2024+)
const jsonResp = Response.json({ name: 'Alice' }, { status: 200 });

const response = await fetch('/api/data');

// clone 后两个 Response 可独立消费 body
const r1 = response.clone();
const r2 = response.clone();

const json1 = await r1.json();
const json2 = await r2.json();
console.log(json1 === json2); // false(不同对象,但内容相同)

const headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token',
});

// 或通过数组
const headers2 = new Headers([
  ['Content-Type', 'application/json'],
  ['Authorization', 'Bearer token'],
]);

const headers = new Headers();

// 添加
headers.append('Set-Cookie', 'a=1');
headers.append('Set-Cookie', 'b=2'); // 多值

// 设置(覆盖)
headers.set('Content-Type', 'application/json');

// 读取
headers.get('Content-Type'); // 'application/json'
headers.get('Set-Cookie');   // 'a=1, b=2'(多值合并)

// 检查
headers.has('Content-Type'); // true

// 删除
headers.delete('Authorization');

// 遍历
for (const [key, value] of headers.entries()) {
  console.log(`${key}: ${value}`);
}
for (const key of headers.keys()) {
  console.log(key);
}
for (const value of headers.values()) {
  console.log(value);
}

// forEach
headers.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

const headers = new Headers({
  'Cookie': 'session=abc',          // 被忽略
  'Host': 'evil.com',               // 被忽略
  'Referer': 'https://evil.com',    // 被忽略
  'Origin': 'https://evil.com',     // 被忽略
  'Content-Length': '999999',       // 被忽略(由浏览器计算)
});

// 这些头部由浏览器自动管理

Access-Control-Expose-Headers: X-Total-Count, X-Page-Count

const controller = new AbortController();
const signal = controller.signal;

// 监听取消事件
signal.addEventListener('abort', () => {
  console.log('操作被取消');
});

// 触发取消
controller.abort();

console.log(signal.aborted); // true

const controller = new AbortController();

fetch('/api/large-data', { signal: controller.signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('请求被取消');
    } else {
      console.error('其他错误:', err);
    }
  });

// 1 秒后取消
setTimeout(() => controller.abort(), 1000);

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { ...options, signal: controller.signal })
    .finally(() => clearTimeout(timer));
}

try {
  const response = await fetchWithTimeout('/api/data', {}, 3000);
  const data = await response.json();
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('请求超时');
  }
}

// 内置超时信号,无需手动管理 timer
const signal = AbortSignal.timeout(5000);

try {
  const response = await fetch('/api/data', { signal });
} catch (err) {
  if (err.name === 'TimeoutError') {
    console.log('超时');
  } else if (err.name === 'AbortError') {
    console.log('手动取消');
  }
}

// AbortSignal.any([signal1, signal2])(ES2024+)
const timeoutSignal = AbortSignal.timeout(5000);
const userCancelController = new AbortController();

// 任一信号触发都会取消
const combinedSignal = AbortSignal.any([
  timeoutSignal,
  userCancelController.signal,
]);

fetch('/api/data', { signal: combinedSignal });

const controller = new AbortController();

// 多个请求共享一个 controller
Promise.all([
  fetch('/api/users', { signal: controller.signal }).then((r) => r.json()),
  fetch('/api/posts', { signal: controller.signal }).then((r) => r.json()),
  fetch('/api/comments', { signal: controller.signal }).then((r) => r.json()),
])
  .then(([users, posts, comments]) => {
    console.log({ users, posts, comments });
  })
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('一个或多个请求被取消');
    }
  });

// 用户切换页面时取消所有
button.addEventListener('click', () => controller.abort());

async function fetchData(url, signal) {
  // 在每个 await 前检查取消状态
  if (signal.aborted) {
    throw new DOMException('Aborted', 'AbortError');
  }

  const response = await fetch(url, { signal });

  // fetch 之后的操作也可能被取消
  if (signal.aborted) {
    throw new DOMException('Aborted', 'AbortError');
  }

  const data = await response.json();
  return data;
}

// 调用方
const controller = new AbortController();
fetchData('/api/data', controller.signal).catch((err) => {
  if (err.name === 'AbortError') {
    console.log('取消');
  }
});

setTimeout(() => controller.abort(), 2000);

async function streamDownload(url, signal) {
  const response = await fetch(url, { signal });
  const reader = response.body.getReader();

  try {
    while (true) {
      // read() 也会响应 signal.aborted,抛出 AbortError
      const { done, value } = await reader.read();
      if (done) break;
      console.log(`收到 ${value.length} 字节`);
    }
  } finally {
    reader.releaseLock();
  }
}

// 简单请求
fetch('https://api.example.com/data', {
  method: 'GET',
});

// 触发预检的请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
});

// 预检请求
// OPTIONS /data HTTP/1.1
// Origin: https://your-site.com
// Access-Control-Request-Method: POST
// Access-Control-Request-Headers: Content-Type

// 服务端响应
// HTTP/1.1 200 OK
// Access-Control-Allow-Origin: https://your-site.com
// Access-Control-Allow-Methods: GET, POST, PUT, DELETE
// Access-Control-Allow-Headers: Content-Type, Authorization
// Access-Control-Max-Age: 86400

// omit:不发送 cookie
fetch(url, { credentials: 'omit' });

// same-origin:同源时发送 cookie(默认)
fetch(url, { credentials: 'same-origin' });

// include:跨域也发送 cookie
fetch(url, { credentials: 'include' });

Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Credentials: true

// Token 认证
const response = await fetch('/api/protected', {
  headers: {
    'Authorization': `Bearer ${token}`,
  },
});

// 自动附加 token 的拦截器
function authFetch(url, options = {}) {
  const token = localStorage.getItem('token');
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: token ? `Bearer ${token}` : '',
    },
  });
}

// 服务端设置 cookie
// Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

// CSRF 防护:双重 cookie
const csrfToken = getCookie('csrf-token');
const response = await fetch('/api/data', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'X-CSRF-Token': csrfToken,
  },
});

// 服务端推送(已在主流浏览器废弃,但 Service Worker 仍可用)
self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};
  event.waitUntil(
    self.registration.showNotification(payload.title || '通知', {
      body: payload.body || '',
      icon: '/icon.png',
      data: payload.data,
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url || '/')
  );
});

// 通过 priority 选项声明优先级(2024+)
fetch('/api/critical', { priority: 'high' });
fetch('/api/non-critical', { priority: 'low' });

// HTML 中的 priority 属性
// <img src="hero.jpg" fetchpriority="high">
// <img src="below-fold.jpg" fetchpriority="low">

# REST 需要多次请求
# GET /users/1
# GET /users/1/posts

# GraphQL 一次请求
query {
  user(id: 1) {
    name
    email
    posts {
      title
      content
    }
  }
}

async function graphqlFetch(query, variables = {}) {
  const response = await fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query, variables }),
  });
  const { data, errors } = await response.json();
  if (errors) {
    throw new Error(errors[0].message);
  }
  return data;
}

// 使用
const data = await graphqlFetch(`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`, { id: 1 });

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
});

// 查询
const { data } = await client.query({
  query: gql`
    query GetUsers {
      users {
        id
        name
      }
    }
  `,
});

// 变更
const result = await client.mutate({
  mutation: gql`
    mutation CreateUser($name: String!) {
      createUser(name: $name) {
        id
      }
    }
  `,
  variables: { name: 'Alice' },
});

// 订阅(WebSocket)
const observable = client.subscribe({
  query: gql`
    subscription OnMessage {
      messageAdded {
        id
        content
      }
    }
  `,
});
observable.subscribe({
  next: (data) => console.log('新消息:', data),
});

import { createClient, gql } from 'urql';

const client = createClient({
  url: '/graphql',
});

const result = await client.query(gql`
  query { users { id name } }
`).toPromise();

async function fetchRetry(url, options = {}, retries = 3) {
  const baseDelay = 1000;
  const maxDelay = 30000;

  for (let i = 0; i <= retries; i++) {
    try {
      const response = await fetch(url, options);
      if (response.ok) {
        return response;
      }
      // 5xx 重试,4xx 不重试
      if (response.status < 500) {
        throw new Error(`HTTP ${response.status}`);
      }
      // 继续重试
    } catch (err) {
      if (i === retries) {
        throw err;
      }
    }
    // 指数退避 + 抖动
    const delay = Math.min(
      baseDelay * Math.pow(2, i) + Math.random() * 100,
      maxDelay
    );
    await new Promise((r) => setTimeout(r, delay));
  }
}

class CircuitBreaker {
  constructor({ threshold = 5, timeout = 60000, resetTimeout = 30000 } = {}) {
    this.failures = 0;
    this.threshold = threshold;
    this.timeout = timeout;
    this.resetTimeout = resetTimeout;
    this.state = 'closed'; // closed | open | half-open
    this.lastFailure = 0;
  }

  async call(fn) {
    if (this.state === 'open') {
      if (Date.now() - this.lastFailure > this.resetTimeout) {
        this.state = 'half-open';
      } else {
        throw new Error('Circuit breaker is open');
      }
    }

    try {
      const result = await fn();
      this.reset();
      return result;
    } catch (err) {
      this.failures++;
      this.lastFailure = Date.now();
      if (this.failures >= this.threshold) {
        this.state = 'open';
        setTimeout(() => {
          this.state = 'half-open';
        }, this.resetTimeout);
      }
      throw err;
    }
  }

  reset() {
    this.failures = 0;
    this.state = 'closed';
  }
}

const breaker = new CircuitBreaker({ threshold: 5 });

async function callApi() {
  return breaker.call(() => fetch('/api/data').then((r) => r.json()));
}

class RateLimiter {
  constructor({ maxRequests, perMs }) {
    this.maxRequests = maxRequests;
    this.perMs = perMs;
    this.requests = [];
  }

  async acquire() {
    const now = Date.now();
    this.requests = this.requests.filter((t) => now - t < this.perMs);

    if (this.requests.length >= this.maxRequests) {
      const oldest = this.requests[0];
      const wait = this.perMs - (now - oldest);
      await new Promise((r) => setTimeout(r, wait));
      return this.acquire();
    }

    this.requests.push(now);
  }
}

const limiter = new RateLimiter({ maxRequests: 10, perMs: 1000 });

async function rateLimitedFetch(url) {
  await limiter.acquire();
  return fetch(url);
}

async function parallelLimit(tasks, limit) {
  const results = [];
  const executing = new Set();

  for (const task of tasks) {
    if (executing.size >= limit) {
      await Promise.race(executing);
    }
    const p = task().then((result) => {
      executing.delete(p);
      return result;
    });
    executing.add(p);
    results.push(p);
  }

  return Promise.all(results);
}

// 使用:最多 5 个并发
const urls = ['/api/1', '/api/2', '/api/3', /* ... */];
const results = await parallelLimit(
  urls.map((url) => () => fetch(url).then((r) => r.json())),
  5
);

class HttpClient {
  constructor(config = {}) {
    this.baseURL = config.baseURL || '';
    this.timeout = config.timeout || 10000;
    this.retries = config.retries || 0;
    this.headers = config.headers || {};
    this.authToken = config.authToken;
    this.onError = config.onError || (() => {});
    this.onRequest = config.onRequest || (() => {});
    this.onResponse = config.onResponse || (() => {});
  }

  async request(path, options = {}) {
    const url = this.baseURL + path;
    const controller = new AbortController();
    const timeoutSignal = AbortSignal.timeout(this.timeout);
    const combinedSignal = AbortSignal.any([
      controller.signal,
      timeoutSignal,
      options.signal,
    ].filter(Boolean));

    const config = {
      ...options,
      signal: combinedSignal,
      headers: {
        'Content-Type': 'application/json',
        ...this.headers,
        ...options.headers,
        ...(this.authToken ? { Authorization: `Bearer ${this.authToken}` } : {}),
      },
    };

    this.onRequest({ url, options: config });

    let lastError;
    for (let attempt = 0; attempt <= this.retries; attempt++) {
      try {
        const response = await fetch(url, config);
        this.onResponse({ url, response });

        if (!response.ok) {
          const error = new HttpError(`HTTP ${response.status}`, response.status, await response.text());
          if (response.status < 500) throw error;
          lastError = error;
        } else {
          return response;
        }
      } catch (err) {
        lastError = err;
        if (err.name === 'AbortError' || err.name === 'TimeoutError') {
          throw err;
        }
      }
      if (attempt < this.retries) {
        await new Promise((r) => setTimeout(r, 1000 * Math.pow(2, attempt)));
      }
    }
    throw lastError;
  }

  get(path, options) {
    return this.request(path, { ...options, method: 'GET' });
  }
  post(path, body, options) {
    return this.request(path, {
      ...options,
      method: 'POST',
      body: JSON.stringify(body),
    });
  }
  put(path, body, options) {
    return this.request(path, {
      ...options,
      method: 'PUT',
      body: JSON.stringify(body),
    });
  }
  patch(path, body, options) {
    return this.request(path, {
      ...options,
      method: 'PATCH',
      body: JSON.stringify(body),
    });
  }
  delete(path, options) {
    return this.request(path, { ...options, method: 'DELETE' });
  }
}

class HttpError extends Error {
  constructor(message, status, body) {
    super(message);
    this.name = 'HttpError';
    this.status = status;
    this.body = body;
  }
}

// 使用
const client = new HttpClient({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  authToken: 'abc123',
  onRequest: ({ url }) => console.log(`→ ${url}`),
  onResponse: ({ url, response }) => console.log(`← ${url} ${response.status}`),
  onError: (err) => console.error('HTTP 错误:', err),
});

const response = await client.get('/users');
const users = await response.json();

class InterceptorManager {
  constructor() {
    this.interceptors = [];
  }
  use(fulfilled, rejected) {
    this.interceptors.push({ fulfilled, rejected });
    return this.interceptors.length - 1;
  }
  eject(id) {
    if (this.interceptors[id]) {
      this.interceptors[id] = null;
    }
  }
  forEach(fn) {
    this.interceptors.forEach((i) => i && fn(i));
  }
}

class InterceptableHttpClient {
  constructor() {
    this.requestInterceptors = new InterceptorManager();
    this.responseInterceptors = new InterceptorManager();
  }

  async request(url, options) {
    let config = { url, ...options };

    // 应用请求拦截器
    this.requestInterceptors.forEach((i) => {
      config = i.fulfilled(config) || config;
    });

    let response = await fetch(config.url, config);

    // 应用响应拦截器
    this.responseInterceptors.forEach((i) => {
      response = i.fulfilled(response) || response;
    });

    return response;
  }
}

// 使用
const client = new InterceptableHttpClient();

// 请求拦截器:自动加 token
client.requestInterceptors.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers = { ...config.headers, Authorization: `Bearer ${token}` };
  }
  return config;
});

// 响应拦截器:401 自动刷新 token
client.responseInterceptors.use(async (response) => {
  if (response.status === 401) {
    await refreshToken();
    // 重新发起请求
  }
  return response;
});

class DedupHttpClient {
  constructor() {
    this.pending = new Map();
  }

  async get(url) {
    if (this.pending.has(url)) {
      return this.pending.get(url);
    }

    const promise = fetch(url)
      .then((response) => {
        this.pending.delete(url);
        return response;
      })
      .catch((err) => {
        this.pending.delete(url);
        throw err;
      });

    this.pending.set(url, promise);
    return promise;
  }
}

// 错误
const data = await fetch('/api/data').then((r) => r.json());
// HTTP 500 时仍会解析响应体,可能得到错误页 HTML

// 正确
const response = await fetch('/api/data');
if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();

// 错误
const response = await fetch('/api/data');
const text = await response.text();
const json = await response.json(); // TypeError

// 正确
const response = await fetch('/api/data');
const cloned = response.clone();
const text = await response.text();
const json = await cloned.json();

// 跨域携带 cookie 必须显式声明
fetch('https://api.example.com/data', {
  credentials: 'include', // 不是 same-origin
});
// 且服务端必须返回
// Access-Control-Allow-Origin: https://your-site.com (具体值,不能是 *)
// Access-Control-Allow-Credentials: true

// 错误:超时后仍触发 abort,即使请求已完成
function fetchWithTimeout(url, timeout) {
  const controller = new AbortController();
  setTimeout(() => controller.abort(), timeout);
  return fetch(url, { signal: controller.signal });
}

// 正确:请求完成后清理 timer
async function fetchWithTimeout(url, timeout) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);
  try {
    return await fetch(url, { signal: controller.signal });
  } finally {
    clearTimeout(timer);
  }
}

// 错误:GET 请求不支持 body
fetch('/api/data', { method: 'GET', body: JSON.stringify({}) });
// 浏览器会忽略 body 或报错

// 正确:用 query string
const params = new URLSearchParams({ page: 1, size: 10 });
fetch(`/api/data?${params}`);

// 错误
fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: 'plain text', // 类型不匹配
});

// 正确
fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' }),
});

// 错误:POST 请求无法缓存
caches.match(postRequest);

// 正确:仅缓存 GET
if (request.method === 'GET') {
  event.respondWith(cacheFirst(request));
}

// 1. 批量请求
const response = await fetch('/api/users/batch', {
  method: 'POST',
  body: JSON.stringify({ ids: [1, 2, 3, 4, 5] }),
});

// 2. GraphQL 一次取数
const data = await graphqlFetch(`
  query {
    users { id name posts { title } }
  }
`);

// 3. 资源预加载
<link rel="preload" href="/api/critical" as="fetch" crossorigin />

// 1. Gzip/Brotli 压缩(服务端)
// 服务端返回 Content-Encoding: gzip

// 2. 字段筛选(GraphQL)
query { users { id name } }  // 只要 id 和 name

// 3. 分页
fetch('/api/users?page=1&size=20');

// 4. 条件请求(ETag)
const response = await fetch('/api/data', {
  headers: { 'If-None-Match': etag },
});
if (response.status === 304) {
  // 使用缓存
}

// 1. HTTP 缓存
// Cache-Control: max-age=3600

// 2. Service Worker 缓存
// 见第 12 章

// 3. 内存缓存
const cache = new Map();
async function cachedFetch(url) {
  if (cache.has(url)) return cache.get(url);
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
}

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//api.example.com">

<!-- 预连接(DNS + TCP + TLS) -->
<link rel="preconnect" href="//api.example.com" crossorigin>

// 页面卸载时仍发送请求(analytics)
window.addEventListener('unload', () => {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({ event: 'page_view' }),
    keepalive: true,
  });
});

// 或使用 sendBeacon
navigator.sendBeacon('/api/analytics', JSON.stringify({ event: 'page_view' }));

// 服务端流式返回 HTML
const response = await fetch('/page');
const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const html = decoder.decode(value, { stream: true });
  // 流式插入 DOM
  document.getElementById('app').insertAdjacentHTML('beforeend', html);
}

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ]);
  }),
  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 3, ...body }, { status: 201 });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('fetch users', async () => {
  const response = await fetch('/api/users');
  const users = await response.json();
  expect(users).toHaveLength(2);
});

import { jest } from '@jest/globals';

global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    status: 200,
    json: () => Promise.resolve({ name: 'Alice' }),
  })
);

test('fetch', async () => {
  const data = await fetch('/api/data').then((r) => r.json());
  expect(data.name).toBe('Alice');
  expect(fetch).toHaveBeenCalledWith('/api/data');
});

// 使用真实 HTTP 服务器
import { createServer } from 'http';

beforeAll((done) => {
  const server = createServer((req, res) => {
    if (req.url === '/api/data') {
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify({ name: 'Alice' }));
    }
  });
  server.listen(3000, done);
});

test('fetch', async () => {
  const response = await fetch('http://localhost:3000/api/data');
  const data = await response.json();
  expect(data.name).toBe('Alice');
});

// 1. XSS 防护:转义用户输入
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, (c) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
  }[c]));
}

// 2. CSRF 防护:双重提交 cookie
const csrfToken = document.cookie.match(/csrf-token=([^;]+)/)?.[1];
fetch('/api/data', {
  method: 'POST',
  headers: { 'X-CSRF-Token': csrfToken },
  credentials: 'same-origin',
});

# 服务端响应头
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Content-Security-Policy: default-src 'self'; connect-src 'self' https://api.example.com

// 1. Token 存储在内存,不存 localStorage
let authToken = null;

function login(token) {
  authToken = token;
}

// 2. HttpOnly cookie 存储会话(无法被 JS 读取)
// Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

// 3. 不在 URL 中传递敏感数据
// 错误
fetch(`/api/data?token=${secret}`);
// 正确
fetch('/api/data', { headers: { Authorization: `Bearer ${secret}` } });

// 4. 日志脱敏
function logRequest(url) {
  const sanitized = url.replace(/token=[^&]+/, 'token=***');
  console.log(sanitized);
}

// 服务端验证用户提供的 URL
function isAllowedUrl(url) {
  const parsed = new URL(url);
  // 仅允许 https
  if (parsed.protocol !== 'https:') return false;
  // 拒绝内网 IP
  const blocked = ['127.0.0.1', '0.0.0.0', 'localhost', '10.', '172.16.', '192.168.'];
  return !blocked.some((ip) => parsed.hostname.startsWith(ip));
}

// Node.js 内置 http 模块
const http = require('http');
http.get('http://example.com', (res) => {
  let data = '';
  res.on('data', (chunk) => data += chunk);
  res.on('end', () => console.log(data));
});

// Node 18+ 支持 Fetch
const response = await fetch('http://example.com');
const data = await response.text();

// chat-client.js
class ChatClient {
  constructor(userId) {
    this.userId = userId;
    this.ws = null;
    this.pendingMessages = [];
    this.messageQueue = [];
  }

  async connect() {
    const token = await this.getToken();
    this.ws = new WebSocket(`wss://api.chat.example.com/ws?token=${token}`);

    this.ws.addEventListener('open', () => {
      console.log('已连接');
      // 发送积压消息
      while (this.pendingMessages.length > 0) {
        this.ws.send(JSON.stringify(this.pendingMessages.shift()));
      }
    });

    this.ws.addEventListener('message', async (event) => {
      // 流式接收(如果是 Blob)
      if (event.data instanceof Blob) {
        const reader = event.data.stream().getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          // 按行处理 NDJSON
          const lines = buffer.split('\n');
          buffer = lines.pop();
          for (const line of lines) {
            const msg = JSON.parse(line);
            this.displayMessage(msg);
          }
        }
      } else {
        const msg = JSON.parse(event.data);
        this.displayMessage(msg);
      }
    });

    this.ws.addEventListener('close', () => {
      console.log('连接断开,5 秒后重连');
      setTimeout(() => this.connect(), 5000);
    });
  }

  send(content) {
    const message = { userId: this.userId, content, timestamp: Date.now() };
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(message));
    } else {
      this.pendingMessages.push(message);
    }
  }

  async sendImage(file) {
    // 分块上传
    const CHUNK_SIZE = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
    const uploadId = Date.now().toString();

    for (let i = 0; i < totalChunks; i++) {
      const start = i * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, file.size);
      const chunk = file.slice(start, end);

      const formData = new FormData();
      formData.append('file', chunk);
      formData.append('uploadId', uploadId);
      formData.append('chunkIndex', i);
      formData.append('totalChunks', totalChunks);

      await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
    }

    return uploadId;
  }

  displayMessage(msg) {
    // 渲染到 UI
    const el = document.createElement('div');
    el.textContent = `${msg.userId}: ${msg.content}`;
    document.getElementById('messages').appendChild(el);
  }

  async getToken() {
    const response = await fetch('/api/auth/token');
    const { token } = await response.json();
    return token;
  }
}

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('chat-v1').then((cache) => cache.addAll([
      '/',
      '/index.html',
      '/chat-client.js',
      '/styles.css',
    ]))
  );
});

self.addEventListener('fetch', (event) => {
  // 1. 历史消息 → Cache First
  if (event.request.url.includes('/api/messages/history')) {
    event.respondWith(
      (async () => {
        const cached = await caches.match(event.request);
        const networkPromise = fetch(event.request).then((response) => {
          const clone = response.clone();
          caches.open('chat-v1').then((cache) => cache.put(event.request, clone));
          return response;
        }).catch(() => cached);
        return cached || networkPromise;
      })()
    );
    return;
  }

  // 2. WebSocket 不拦截
  if (event.request.url.startsWith('wss://')) {
    return;
  }

  // 3. 其他 → Network First
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

// 后台同步:离线发送的消息
self.addEventListener('sync', (event) => {
  if (event.tag === 'send-pending') {
    event.waitUntil(sendPendingMessages());
  }
});

async function sendPendingMessages() {
  const cache = await caches.open('pending-messages');
  const requests = await cache.keys();
  for (const request of requests) {
    const response = await fetch(request);
    if (response.ok) {
      await cache.delete(request);
    }
  }
}

// 上报性能指标
class ChatMetrics {
  constructor() {
    this.metrics = {
      messageLatency: [],
      connectionUptime: 0,
      reconnectCount: 0,
    };
  }

  recordMessageLatency(sentAt, receivedAt) {
    this.metrics.messageLatency.push(receivedAt - sentAt);
    if (this.metrics.messageLatency.length > 100) {
      this.metrics.messageLatency.shift();
    }
  }

  flush() {
    // 使用 sendBeacon 在页面卸载时上报
    navigator.sendBeacon('/api/metrics', JSON.stringify(this.metrics));
  }
}