fetch拦截

重写fetch

const fetchOriginal = fetch;
window.fetch = (...args) => {
  return fetchOriginal(...args);
};

请求拦截

可以在调用fetchOriginal()方法前做请求拦截的事。

响应拦截(重点)

由于Response对象的body一旦被读取后就会被标记为已读bodyUsed: true，导致后续的读取失败，因此不能在拦截的时候直接进行读取，可以使用response.clone()方法返回一个新的Response对象。

const fetchOriginal = fetch;
window.fetch = (...args) => {
  // 在这里进行请求拦截
  return fetchOriginal(...args).then(rsp => {
    // 不能读取rsp中的内容，否则会导致后续的读取失败
    // 使用clone()方法返回一个新的Response对象
    rsp.clone().then(rsp => {
      // 可以在这里做一些事
      // 例如 处理json格式数据
      rsp.json().then(data => {
        // ...
      });
    });
    // 返回原rsp对象
    return rsp;
  });
};

对指定url进行拦截

const fetchOriginal = fetch;
window.fetch = (url, ...args) => {
  // 在这里进行请求拦截
  return fetchOriginal(url, ...args).then(rsp => {
    if (url.startsWith('https://api.xxx.cn/')) {
      rsp.clone().then(rsp => {
        if (rsp.headers.get('Content-Type').includes('application/json')) {
          rsp.json().then(data => {
            // ...
          });
        }
      });
    }
    // 返回原rsp对象
    return rsp;
  });
};

类似于axios中的响应拦截器

要实现类似axios中的响应拦截器的话，那么每次返回都必须是一个Response对象。

可以通过new Response(body, init)去构建，并且也无需调用response.clone()。