可以将 Fetch API 用作请求拦截器吗？

Posted 2023-02-27

【中文标题】可以将 Fetch API 用作请求拦截器吗？

【英文标题】：Can one use the Fetch API as a Request Interceptor?

【发布时间】：2017-07-23 12:55:13

【问题描述】：

我尝试在每次使用 Fetch API 向服务器发出请求后运行一些简单的 JS 函数。我已经搜索过这个问题的答案，但没有找到任何答案，这可能是因为 Fetch API 是相对较新的。

我一直在用 XMLHttpRequest 这样做：

(function () 
   var origOpen = XMLHttpRequest.prototype.open;
   XMLHttpRequest.prototype.open = function () 
      this.addEventListener('load', function () 

         someFunctionToDoSomething();   

       );
       origOpen.apply(this, arguments);
    ;
)();

很高兴知道是否有一种方法可以使用 Fetch API 完成同样的全局操作。

【参考方案1】：

由于fetch 返回一个promise，您可以通过覆盖fetch 将自己插入到promise 链中：

(function () 
    var originalFetch = fetch;
    fetch = function() 
        return originalFetch.apply(this, arguments).then(function(data) 
            someFunctionToDoSomething();
            return data;
        );
    ;
)();

Example on jsFiddle （因为 Stack Snippets 没有方便的 ajax 功能）

【参考方案2】：

就像您可以覆盖 open 方法一样，您也可以使用拦截方法覆盖全局 fetch 方法：

fetch = (function (origFetch) 
    return function myFetch(req) 
        var result = origFetch.apply(this, arguments);
        result.then(someFunctionToDoSomething);
        return result; // or return the result of the `then` call
    ;
)(fetch);