HTML怎么做fetch拦截器_HTML fetch请求响应拦截器实现【入门】-html教程-PHP中文网

fetch拦截器需通过JavaScript劫持全局fetch函数实现，本质是用Proxy重写window.fetch，在请求前/响应后插入逻辑；HTML本身不提供拦截能力，且必须在早期执行、避免重复代理，并注意Request实例不可变、body需clone才能多次读取。

html怎么做fetch拦截器_html fetch请求响应拦截器实现【入门】

HTML 里没法直接做 fetch 拦截器

浏览器环境下的 fetch 是原生 API，没有内置拦截机制，HTML 本身更不提供任何运行时钩子。所谓“HTML 做 fetch 拦截器”是个常见误解——真正能动手的地方是 JavaScript 运行时，而且必须在 fetch 调用前完成代理替换。

你看到的“拦截器”效果，本质是重写全局 fetch 函数，或用 Proxy 包裹它，所有后续调用都会经过你的逻辑。但这不是 HTML 的能力，而是 JS 对运行时行为的劫持。

用 Proxy 重写 window.fetch 最简单可靠

这是目前最轻量、兼容性好（Chrome 49+ / Firefox 53+ / Safari 10.1+）、不影响原有调用方式的做法。核心思路：保存原始 fetch，再用 Proxy 包一层，在发起请求前/收到响应后插入自定义逻辑。

必须在页面最早期执行（比如 <script></script> 放在里），否则已有模块可能已缓存旧的 fetch
注意不要重复代理：检查 window.__isFetchProxied 这类标记，避免多次覆盖
response.clone() 才能多次读取 body，直接 response.json() 会消耗流，后续再读就报错 TypeError: Failed to execute 'json' on 'Response': body stream already read
示例代码：

const originalFetch = window.fetch;
window.fetch = new Proxy(originalFetch, {
  apply(target, thisArg, args) {
    const [input, init] = args;
    console.log('【请求发出】', input, init?.method || 'GET');

    return target.apply(thisArg, args)
      .then(response => {
        console.log('【响应收到】', response.status, response.url);
        // 注意：这里不能直接 await response.json()，除非你 clone
        return response;
      })
      .catch(err => {
        console.error('【请求失败】', err);
        throw err;
      });
  }
});

拦截器里怎么统一加 token 或改 header

修改请求头必须在 init 存在且为对象的前提下操作；如果传的是 Request 实例，得用 new Request(url, { ...originalRequest, headers }) 重建，因为 Request.headers 是只读的。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

判断参数类型：input instanceof Request 为 true 说明传入的是 Request 对象
安全加 header：用 new Headers(init?.headers) 克隆后再 .set('Authorization', 'Bearer xxx')
不要直接修改 init.headers，它可能是 undefined 或 Headers 实例（不可赋值）
示例片段（加 token）：

apply(target, thisArg, args) {
  let [input, init] = args;
  if (!init || typeof init !== 'object') init = {};
  
  const headers = new Headers(init.headers);
  headers.set('Authorization', 'Bearer ' + localStorage.getItem('token') || '');

  if (input instanceof Request) {
    input = new Request(input, { ...init, headers });
  } else {
    init.headers = headers;
  }

  return target.apply(thisArg, [input, init]);
}

为什么 axios 拦截器不适用于纯 fetch 场景

axios 的 interceptors.request.use 和 interceptors.response.use 只对它自己封装的请求生效，和原生 fetch 完全无关。如果你项目里混用两者，必须分别处理：axios 用它的拦截器，fetch 用上面说的 Proxy 方案。

更大的坑在于第三方库：像 graphql-request、swr、react-query 默认都用 fetch，它们发的请求会被你的 Proxy 拦到——这本来是好事，但如果你在拦截器里抛了未捕获异常，整个请求链就断了，且错误堆栈不直观。