Javascript 拦截提取调用

我已经尝试了很长一段时间来拦截回程呼叫。我已成功拦截呼叫，但原始呼叫未执行。直到昨天，我才知道fetch是什么，这是一个漫长的过程，只是我发现我听不到$.ajaxSuccess或XMLHttpRequest

我做错了什么？我真的不知道承诺是怎么起作用的。我已经试着读过了

问题是，我这样做可以成功读取返回的JSON，但它不会传递给原始调用函数。（仅供参考，我希望在调用函数执行后处理数据）。这就是我到目前为止所拥有的，但我不知道如何让它发挥作用：

const constantMock = window.fetch;
window.fetch = function() {
   return new Promise((resolve, reject) => {
      constantMock.apply(this, arguments)
         .then((response) => {
            resolve(response);
            if(response.url.indexOf("/history") === -1 || response.type == "cors")
               return;

            response.json().then((data) => {
               resolve(data);
               console.log(data);
            });
         })
         .catch((error) => {
            reject(response);
         })
   });
}

我怎样才能做到这一点？我做错了什么？我应该做什么

---

（我无法访问调用者函数，因为我正在将代码注入浏览器。）

我不久前做了类似的事情，下面是我编写的模块

注:

• 如果您正在拦截，resp.clone（）非常重要。该响应是一次性使用的，因此克隆允许您使用该响应，并且仍然将其返回到原始回调
• 我想，返回原始承诺链以及拦截器

  会更容易。当然，然后

  ，只需确保在

  中返回原始响应。然后，在出于您自己的目的克隆它之后

不管怎样，代码如下：

const fetchSnoop = (callback) => {
  if (typeof window.fetch.qwerCb !== 'undefined')
    window.fetch.qwerCb = callback;
  else {
    var qfetch = window.fetch;
    window.fetch = function (req, init) {
      return qfetch.apply(window, arguments).then(function (resp) {
        if (typeof window.fetch.qwerCb === 'function')
          window.fetch.qwerCb(resp.clone(), req, init);
        return resp;
      });
    };
    window.fetch.qwerCb = callback;
  }
};

我确信这是显而易见的，这个模块的设计目的是让您注册一个“回调”函数，以便在每次获取时调用。它只能以我编写的方式进行一次回调，但是如果需要多次回调，那么为一个数组更改我的单个命名属性将非常容易。无论如何，下面是注册回调的示例：

fetchSnoop((resp, req, init) => {
  if (true /* test criteria if you're only looking for particular fetches */)
    resp.json().then(t => {
      console.log('my json', t);
    });
});

---

我之前也做过类似的事情，这是我写的模块

注:

• 如果您正在拦截，resp.clone（）非常重要。该响应是一次性使用的，因此克隆允许您使用该响应，并且仍然将其返回到原始回调
• 我想，返回原始承诺链以及拦截器

  会更容易。当然，然后

  ，只需确保在

  中返回原始响应。然后，在出于您自己的目的克隆它之后

不管怎样，代码如下：

const fetchSnoop = (callback) => {
  if (typeof window.fetch.qwerCb !== 'undefined')
    window.fetch.qwerCb = callback;
  else {
    var qfetch = window.fetch;
    window.fetch = function (req, init) {
      return qfetch.apply(window, arguments).then(function (resp) {
        if (typeof window.fetch.qwerCb === 'function')
          window.fetch.qwerCb(resp.clone(), req, init);
        return resp;
      });
    };
    window.fetch.qwerCb = callback;
  }
};

我确信这是显而易见的，这个模块的设计目的是让您注册一个“回调”函数，以便在每次获取时调用。它只能以我编写的方式进行一次回调，但是如果需要多次回调，那么为一个数组更改我的单个命名属性将非常容易。无论如何，下面是注册回调的示例：

fetchSnoop((resp, req, init) => {
  if (true /* test criteria if you're only looking for particular fetches */)
    resp.json().then(t => {
      console.log('my json', t);
    });
});

---

可能想看看

fetch（）

的包装器库，它还有一些额外的中间件，比如@charlietfl，我应该提到我不能使用任何外部库。好的……这个库的源代码也可能对you@charlietfl我一定会看一看的，谢谢！您必须使用window.fetch调用还是可以将其包装到自己的函数中？e、 g.`const myFetch=function（）{//do other stuff here with arguments return window.fetch（arguments）；}可能需要查看

fetch（）的包装器库

还有一些额外的中间件，比如@charlietfl，我应该提到，我不能使用任何外部库来实现这一点。好的……该库的源代码可能对you@charlietfl我一定会看一看的，谢谢！您必须使用window.fetch调用还是可以将其包装到自己的函数中？e、 g.`const myFetch=function（）{//在这里之前使用参数返回窗口执行其他操作。fetch（参数）；}太棒了！但是，r函数是什么？还有什么方法可以确保只在调用原始响应时调用克隆的响应？哎呀，忘了

r

。我有另一个承诺做其他事情，这是解决它。从我的答案中删除它。嗯，不确定是否要延迟响应克隆。响应有一个属性，但据我所知没有回调。有点粗糙，但是你可以使用setTimeout或setInterval来观察原始响应是否被使用。是的，setTimeout是我想要的，但我认为可能有一种更正确的方法。我来看看bodyUsed。非常感谢大卫：）太好了！但是，r函数是什么？还有什么方法可以确保只在调用原始响应时调用克隆的响应？哎呀，忘了

r

。我有另一个承诺做其他事情，这是解决它。从我的答案中删除它。嗯，不确定是否要延迟响应克隆。响应有一个属性，但据我所知没有回调。有点粗糙，但是你可以使用setTimeout或setInterval来观察原始响应是否被使用。是的，setTimeout是我想要的，但我认为可能有一种更正确的方法。我来看看bodyUsed。非常感谢大卫：）