如何在Javascript中每次使用fetch（）时执行函数？

每次在我的脚本中发出HTTP请求时，我都试图向我的

sharedWorker

发布一条消息，以便在每次HTTP请求后手动保存

我设法让它像这样工作：

var App = {
    __webWorker: null,
    __XMLHttpRequest: XMLHttpRequest.prototype.open,
    __onScriptComplete: e       => {
        if( e.data.type && e.data.type === 'worker' ) {
            sessionStorage.setItem( 'token', e.data.session.token );
            return;
        }
    }
};

window.addEventListener( 'load', () => {
    XMLHttpRequest.prototype.open  = (method, url, async, user, password) => {
        App.__XMLHttpRequest(method, url, async, user, password);
        App.__webWorker.postMessage( '{{md5(session_id())}}' );
    };

    const worker = new SharedWorker( '{{$router->generate( 'web_notify_worker' )}}' );
    worker.port.onmessage = e => App.__onScriptComplete( e );
    App.__webWorker = worker.port;

    // The below gives me a Uncaught TypeError: Illegal invocation and the App.__webWorker.postMessage is executed
    let req = new XMLHttpRequest();
    req.open( 'GET', '/', true );
    req.send();

    // The below works fine but the App.__webWorker.postMessage is not executed
    fetch( '/', { method: 'GET' } );
} );

当我创建一个

新的XMLHttpRequest（）

时，它工作正常，

会话存储

项设置了数据。但是，我不使用

XMLHttpRequest

，而是使用

fetch（）

。这似乎并没有创建我认为会创建的

XMLHttpRequest

每次调用新的

fetch（）

时，如何在我的

应用程序上执行
postMessage
函数？最好在完成之后

更新：这是我自己的框架，我使用了Smarty模板引擎，所以忽略
{{}
前缀区域。这就是我从PHP将数据导入脚本的方式

更新：我已尝试执行此操作，但未捕获（承诺中）类型错误：未能在“窗口”上执行“获取”：非法调用

：

var App = {
    ...,
    __fetch: fetch
}

fetch = ( uri, args ) => {
    App.__fetch( uri, args );
    App.__webWorker.postMessage( '{{md5( session_id() )}}' );
};

---

在进行了一些广泛的谷歌搜索后，我发现问题在于将

获取

存储在

应用程序

范围内。要解决此问题，必须将其存储在

窗口

范围内

_fetch = fetch;

fetch = ( uri, args ) => {
    let f = _fetch( uri, args );
    App.__webWorker.postMessage( '{{md5( session_id() )}}' );
    return f;
};

---

这样就可以了，每次发送

fetch（）

时，我的

sharedWorker

都会收到一条消息。

经过大量的谷歌搜索后，我发现问题在于将

fetch

存储在

应用程序的
范围内。要解决此问题，必须将其存储在
窗口
范围内

_fetch = fetch;

fetch = ( uri, args ) => {
    let f = _fetch( uri, args );
    App.__webWorker.postMessage( '{{md5( session_id() )}}' );
    return f;
};

这样就可以了，每次发送
fetch（）
时，我的
sharedWorker
都会发布一条消息。
您可以覆盖覆盖全局并调用它。如果你把它变成你自己的方法，你称之为“劫持”，而不是“劫持”，那会干净得多


const\u fetch=window.fetch
//window.fetch=函数（）{
window.fetch=函数（…参数）{
console.log（'before fetch'）
//返回Promise.resolve（_fetch.apply（窗口、参数））
返回Promise.resolve（_fetch.apply（窗口，参数））
。然后（resp=>{
log（'insidethen'）；
返回响应；
})
}
取（'https://jsonplaceholder.typicode.com/todos/1')
.then（response=>response.json（））
。然后（json=>console.log（json））
您可以覆盖覆盖全局并调用它。如果您将其设置为自己的方法并调用它，而不是此“劫持”，则会更干净


const\u fetch=window.fetch
//window.fetch=函数（）{
window.fetch=函数（…参数）{
console.log（'before fetch'）
//返回Promise.resolve（_fetch.apply（窗口、参数））
返回Promise.resolve（_fetch.apply（窗口，参数））
。然后（resp=>{
log（'insidethen'）；
返回响应；
})
}
取（'https://jsonplaceholder.typicode.com/todos/1')
.then（response=>response.json（））
。然后（json=>console.log（json））
类似的东西就是您要找的东西？类似的东西就是您要找的东西？这不是真的。您可以将其存储在应用程序中，而不是调用应用程序。_fetch（…args）您需要像调用应用程序一样调用它。_fetch.call（窗口，…args）你每天都会学到新东西！谢谢你的知识@Andreith这不是真的。你可以将它存储在App中，而不是调用App。_fetch（…args）你需要像调用App一样调用它。_fetch.call（窗口，…args）你每天都能学到新的东西！谢谢你的知识@anderithis比我原来的解决方案整洁多了！你最近的编辑工作完美，达到了我的确切目标！非常感谢！这比我原来的解决方案整洁多了！你最近的编辑工作完美，达到了我的确切目标！非常感谢！