Logging System with Proxy and Fetch

1. 代理对象：fetchlogger 包装了 fetch 函数。
   它使用 apply trap 来拦截对 fetch 的调用。

2. 请求日志记录：记录请求的 url 和选项。
   响应处理：记录响应状态、状态文本和 url。
   克隆响应以确保正文可以被多次读取。

3. 错误处理：捕获并记录提取过程中遇到的任何错误。

4. 使用代理：您可以通过将代理分配给window.fetch来全局替换fetch。
   

   

   Magician

   Figma插件，AI生成图标、图片和UX文案

   下载

// create a logging wrapper for fetch using proxy
const fetchlogger = new proxy(fetch, {
    apply: (target, thisarg, args) => {
        // log the request details
        const [url, options] = args;
        console.log("fetch request:");
        console.log("url:", url);
        console.log("options:", options);

        // call the original fetch function
        return reflect.apply(target, thisarg, args)
            .then(response => {
                // log response details
                console.log("fetch response:");
                console.log("status:", response.status);
                console.log("status text:", response.statustext);
                console.log("url:", response.url);

                // return the response for further use
                return response.clone(); // clone to allow response reuse
            })
            .catch(error => {
                // log errors
                console.error("fetch error:", error);
                throw error; // rethrow the error for caller handling
            });
    }
});

// example usage of the logging fetch
fetchlogger("https://jsonplaceholder.typicode.com/posts", {
    method: "get",
    headers: {
        "content-type": "application/json"
    }
})
    .then(response => response.json())
    .then(data => console.log("data:", data))
    .catch(error => console.error("error in fetch:", error));

将全局获取替换为日志记录

window.fetch = fetchLogger;