基于原生JS封装请求拦截器

封装XMLHttpRequest对象拦截方法#

function proxyRequest() {
  const _xhr = window.XMLHttpRequest;
  const proxies = [];
  const events = {};
  const cache = { _this: null, _xhr: null };

  window.XMLHttpRequest = function () {
    cache._xhr = new _xhr();
    proxies.forEach((func) => {
      try {
        func(cache._xhr);
      } catch (e) {}
    });
    Object.keys(events).forEach((name) => {
      events[name].forEach((proxy) => {
        cache._xhr.addEventListener(name, (evt) =>
          proxy?.func(evt, cache._xhr)
        );
      });
    });
    return cache._xhr;
  };

  return new chain();

  function use(func) {
    proxies.push(func);
    return cache._this;
  }

  function on(name, func) {
    events[name] = [...(events[name] || []), { name, func }];
    return cache._this;
  }

  function load(func) {
    return cache._this.on("load", (evt) => {
      const text = cache._xhr?.responseText;
      func(toJSON(text) || text, evt, cache._xhr);
    });
  }

  function chain() {
    cache._this = this;
    this.proxies = proxies;
    this.events = events;
    this.use = use;
    this.on = on;
    this.load = load;
  }

  function toJSON(text) {
    try {
      return JSON.parse(text);
    } catch (e) {
      return null;
    }
  }
}
/**
*  调用示例：
*/

const instance = proxyRequest();

instance.use((xhr) => {
  xhr.addEventListener("load", () => {
    console.log(JSON.parse(xhr.responseText)
  });
});

instance.on("load", (evt, xhr) => {
  console.log(JSON.parse(xhr.responseText)
});

instance.load((data, evt, xhr) => {
  console.log(data);
});

封装Fetch对象拦截方法#

function proxyFetch() {
  let _this = null;
  const _fetch = window.fetch;
  const proxies = [];
  window.fetch = function (...args) {
    const res = _fetch(...args);
    res.then((res) => {
      proxies.forEach((func) => {
        try {
          func(res.clone());
        } catch (e) {}
      });
    });
    return res;
  };

  return new chain();

  function chain() {
    _this = this;
    this.proxies = [];
    this.use = use;
  }

  function use(func) {
    proxies.push(func);
    return _this;
  }
}

/**
*   调用示例:
*/

const fetchInstance = proxyFetch();

fetchInstance.use(async (res) => {
  console.log(await res.json());
});