Logging System with Proxy and Fetch

收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《Logging System with Proxy and Fetch》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

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

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

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

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

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

以上就是《Logging System with Proxy and Fetch》的详细内容，更多关于的资料请关注米云公众号！

版本声明 本文转载于：dev.to 如有侵犯，请联系删除

Vite 中如何引入静态 JS 文件？