js fetch hook

最新推荐文章于 2025-11-30 19:37:35 发布

原创最新推荐文章于 2025-11-30 19:37:35 发布 · 947 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html5 #html #vue

这篇博客介绍了如何使用UserScript技术，通过修改window.fetch函数，实现在发送HTTP请求时进行监控和数据处理，展示了对响应体内容的逐块读取和转换。

部署运行你感兴趣的模型镜像

// ==UserScript==
// @name         Hook fetch
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!

// @include      *
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    window.au_fetch=window.fetch;
    window.fetch=function(url){
        console.log(url);
        return window.au_fetch.apply(window,arguments).then((response) => {
            const reader = response.body.getReader();
            const stream = new ReadableStream({
                start(controller) {
                    function push() {
                        // "done"是一个布尔型，"value"是一个Unit8Array
                        reader.read().then((e) => {
                            let { done, value }=e;
                            // 判断是否还有可读的数据？
                            console.log(done,new TextDecoder("utf-8").decode(value));
                            if (done) {
                                // 告诉浏览器已经结束数据发送
                                controller.close();
                                return;
                            }
                            // 取得数据并将它通过controller发送给浏览器
                            controller.enqueue(value);
                            push();
                        });
                    }
                    push();
                }
            });
            let ret=new Response(stream, { headers: { "Content-Type": "text/html" } })
            console.log(stream,ret);
            return ret;
        });
    };
    // Your code here...
})();

您可能感兴趣的与本文相关的镜像