标签：function 拦截器 封装 cache JS return xhr func const

封装XMLHttpRequest对象拦截方法

function proxyRequest() {
  const _xhr = window.XMLHttpRequest;
  const proxies = [];
  const events = {};
  const cache = { _this: 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 this.on("load", (evt) => {
      const text = cache._xhr?.responseText;
      func(toJSON(text) || text, evt, cache._xhr);
    });
  }

  function chain() {
    _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());
});

标签：function,拦截器,封装,cache,JS,return,xhr,func,const
来源： https://www.cnblogs.com/lonae/p/16376697.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。