Logging System with Proxy and Fetch-js教程-PHP中文网

Logging System with Proxy and Fetch

霞舞

发布： 2024-11-30 17:09:31

转载

1043人浏览过

logging system with proxy and fetch

代理对象：fetchlogger 包装了 fetch 函数。
它使用 apply trap 来拦截对 fetch 的调用。
请求日志记录：记录请求的 url 和选项。
响应处理：记录响应状态、状态文本和 url。
克隆响应以确保正文可以被多次读取。
错误处理：捕获并记录提取过程中遇到的任何错误。
使用代理：您可以通过将代理分配给window.fetch来全局替换fetch。

Eva Design System
基于深度学习的色彩生成器

86

查看详情

// 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));

登录后复制