Fetch 提交与返回内容

本章中我们将学习到如何对 Fetch 提交以及返回的内容进行劫持。

如何对提交内容进行劫持

fetch 的使用还是相对简单的，如果不了解可以查看 MDN 文档

我们直接看一个使用例子

fetch("https://www.xxx.com")
  .then((response) => response.json())
  .then((json) => console.log(json));

我们直接对 fetch 函数进行劫持即可

let oldFetch = fetch;
function hookFetch(url, init) {
  //这里进行提交内容劫持
  return oldFetch.apply(this, arguments);
}
window.fetch = hookFetch;

如何对返回内容进行劫持

这里的代码相对较为简单，所以我们直接提供示例和分析

仅涉及到了 Promise 和 hook 的知识

代码作者：cxxjackie

//oldFetch保存了原fetch的引用
let oldFetch = fetch;
function hookFetch() {
  // fetch需要返回一个promise，所以这里我们new一个Promise返回，
  // 然后自行处理fetch的逻辑后resolve出去
  return new Promise((resolve, reject) => {
    // 这里我们使用fetch的原函数，
    // 通过apply更改了this指针至自身，并且传入了参数
    // 我们劫持函数的时候，
    // 由劫持函数调用原函数的过程中一定要使用call/apply进行修改this指针，
    // 以符合原来的调用过程。
    // 在then中则是我们处理response的过程
    oldFetch.apply(this, arguments).then((response) => {
      // 这部分代码是针对某些特定的函数进行过滤，
      // 我们可以对网页进行分析以及调试，
      // 或去返回内容进行查看，来判断调用了哪些函数。
      // 这里以json为例进行劫持，注意，如果你的网页未使用json函数可能导致劫持失败
      // 首先保存了原json的引用
      const oldJson = response.json;
      // 修改json属性为一个劫持函数
      response.json = function () {
        // 由于json返回的是一个promise对象，
        // 所以我们这里也需要返回一个promise
        return new Promise((resolve, reject) => {
          // 在promise内依对其原json函数进行调用，
          // 并修改了this指向以及参数
          // 最后对其结果进行一定的修改，
          // 然后通过resolve(result)进行返回
          oldJson.apply(this, arguments).then((result) => {
            result.hook = "success"; //对返回的数据进行修改
            resolve(result);
          });
        });
      };
      resolve(response);
    });
  });
}
// 对window.fetch挂载成我们的劫持函数hookFetch
window.fetch = hookFetch;