fetch() is spamming my API with thousands of requests

I have the following function which gets an image from my API:

function fetch() {
    console.log("Fire");
    fetch('https://api.itseternal.net/eternal/stats', {
        headers: {
            "Access-Control-Allow-Origin": "https://itseternal.net"
        },
        mode: "cors",
    })

    .then((result) => result.json())
    .then((api) => {
        document.getElementById('cover').src = api.song.covers.big;
        var string = `background-image: url(` + api.song.covers.big + `);`;
        document.getElementById('body').style = string
    })
    .catch(() => {
        document.getElementById('cover').src = "https://callmehspear.com/cdn/e_black_branding.png";
        document.getElementById('body').style = "background-image: url(https://callmehspear.com/cdn/e_black_branding.png);";
    });
}

It did work, but now when I run the function it spams the API as the console gets flooded with “Fire” and my server gets thousands upon thousands of requests.

Answer

You named the function fetch so it overwrites (or shadows, depending on the scope your function is declared in) the previous value (the function provided by the Fetch API).

When you call fetch it logs “Fire” and then recursively calls itself (passing arguments that it ignores).

Don’t name your function fetch.