1. 代理物件：fetchLogger 包裝了 fetch 函數(shù)。
   它使用 apply trap 來(lái)攔截對(duì) fetch 的呼叫。

2. 請(qǐng)求日誌記錄：記錄請(qǐng)求的 url 和選項(xiàng)。
   回應(yīng)處理：記錄回應(yīng)狀態(tài)、狀態(tài)文字和 URL。
   克隆響應(yīng)以確保正文可以被多次讀取。

3. 錯(cuò)誤處理：捕獲並記錄提取過(guò)程中遇到的任何錯(cuò)誤。

4. 使用代理：您可以透過(guò)將代理程式指派給window.fetch來(lái)全域替換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;

以上是帶有代理和獲取的日誌系統(tǒng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！