首页 > web前端 > js教程 > 带有代理和获取的日志系统

带有代理和获取的日志系统

Patricia Arquette
发布: 2024-12-03 09:12:10
原创
589 人浏览过

Logging System with Proxy and Fetch

  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;
登录后复制

以上是带有代理和获取的日志系统的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板