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