Rumah >hujung hadapan web >tutorial js >Sistem Pembalakan dengan Proksi dan Ambil

Sistem Pembalakan dengan Proksi dan Ambil

Patricia Arquette
Patricia Arquetteasal
2024-12-03 09:12:10533semak imbas

Logging System with Proxy and Fetch

  1. Objek Proksi: FetchLogger membalut fungsi ambil.
    Ia menggunakan perangkap guna untuk memintas panggilan untuk diambil.

  2. Pengelogan Permintaan:Melog url dan pilihan permintaan.
    Pengendalian Respons: Log status respons, teks status dan URL.
    Mengklonkan tindak balas untuk memastikan badan boleh dibaca beberapa kali.

  3. Pengendalian Ralat: Tangkap dan catatkan sebarang ralat yang dihadapi semasa pengambilan.

  4. Menggunakan Proksi: Anda boleh menggantikan fetch secara global dengan memberikan proksi kepada window.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));

Gantikan pengambilan Global dengan Pengelogan

window.fetch = fetchLogger;

Atas ialah kandungan terperinci Sistem Pembalakan dengan Proksi dan Ambil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn