The fetch() function is inundating my API with an overwhelming amount of requests

After implementing the following function to retrieve images from my API, I encountered an issue:

function getImages() {
    console.log("Ignite");
    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 bgString = `background-image: url(` + api.song.covers.big + `);`;
        document.getElementById('body').style = bgString;
    })
    .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);";
    });
}

Although it initially worked, running the function now results in excessive requests being sent to the API, causing the server to receive an overwhelming amount of traffic.

Answer №1

You have assigned the name fetch to your function, causing it to replace (or hide, depending on where your function is defined) the previous value (which was the function provided by the Fetch API).

Every time you invoke fetch, it displays "Fire" and then continues to call itself recursively (even though it disregards any arguments passed to it).

Avoid using the name fetch for your function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Not receiving connections on localhost port 3000

Our team has successfully created a basic Express Node website https://i.stack.imgur.com/5fwmC.png We attempted to run the app using DEBUG=express_example:* npm start https://i.stack.imgur.com/NI5lR.png We also tried running it with node DEBUG=express_ ...

"Vue.js: The Ultimate Guide to Event Management and Data Handling

I recently started learning Vue.js and I'm having some difficulty with my coding exercises: The task is to have a menu button that opens a dropdown box when clicked, and when any selection is made, it should go back to the menu button. index.js cons ...

How to upload a document to Alfresco using JavaScript API

I am facing an issue while attempting to upload a file from a node application to my local Alfresco server. I have been able to login, create, and delete folders successfully, but I am encountering difficulties when trying to upload files. let AlfrescoApi ...

Invoke the forEach method within a lambda function and assign the output to a variable

In order to achieve my goal, I am looking for a way to take an array as input and save the result for future use. Unfortunately, I do not have permission to create additional functions. As a result, the code must accurately reflect what result should be. l ...

HTML not updating after a change in properties

My template is structured as a table where I update a column based on a button click that changes the props. Even though the props are updated, I do not see the template re-rendered. However, since I am also caching values for other rows in translatedMessa ...

Security Vulnerability in Ajax Callback Breakpoints

Imagine I have the following code snippet (partially pseudocode) $.ajax({ url: "/api/user", success: function(resp) { var data = JSON(resp) if (data.user.is_admin) // do admin thing else // do somet ...

What is the best way to map elements when passing props as well?

In my code, I am using multiple text fields and I want to simplify the process by mapping them instead of duplicating the code. The challenge I'm facing is that these textfields also require elements from the constructor props. import React, { Compon ...

Encountered an issue loading resource: server encountered a status of 500 (Internal Server Error) while working in react framework

Struggling to send a POST request in react using a form, but encountering a 500 error response from the server. The handleSubmit function is designed like this; however, it seems to be ineffective and consistently returns an internal server error with a 50 ...

Able to successfully access user account on Postman, however encountering login issues when trying to do

If I can successfully log in a user using Postman, does that indicate there is a bug in my front end code? Encountered CastError: Casting to string failed with value "{ email: '[email protected]', password: '123456' }" (type Objec ...

Render variable values with Mustache syntax

There are two separate html pages named home and about. Each page contains a js variable defined at the top of the page: var pageAlias = 'home'; // on the home page var pageAlias = 'about'; // on the about page The goal is to pass thi ...

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

Use Python to fetch a file from a webpage without having to actually open the webpage

I needed a method to automate the download of a file from a particular website without having to manually open the website. Everything should be done in the background. The website in question is Morningstar, and a specific example link is: . On this page ...

Does the react-google-login library utilize the services provided by Google Identity?

Currently incorporating the react-google-login library (https://www.npmjs.com/package/react-google-login/v/5.2.2) in my JavaScript codebase to grant users access to my website. Can anyone confirm whether this library utilizes "Google Identity Services" or ...

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

Hello everyone! I am facing an error message in my application after unmounting the component: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, canc ...

Issues Arising When Trying to Call a Rest API on Express.js Using Angular 2

When I attempt an http get call from my Angular component, I encounter the following error: "Failed to load http://localhost:3005/json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3 ...

Utilizing Jquery for precise element placement and retrieving its position details

Within my bundle of jQuery code, there are a few areas where I am experiencing difficulties trying to recall functions. The following is an excerpt of the code: $(document).ready(function(){ $("#myTablePager").html(""); $.ajax({ type: "POS ...

How to extract information for divs with specific attribute values using Jquery

I have multiple divs with IDs like #result-1, #result-2, each followed by a prefix number. To count the number of list items within these divs, I use the following code: $(document).ready(function () { var colorCount = $('#result-1 .item-result ...

Tips for transferring a JSON object from an HTML document to a JavaScript file

Here is the code snippet: <script id="product-listing" type="x-handlebars-template"> {{#each productsInCart}} <tr> <td> <div class="imageDiv"> <img ...

Can the ThreeJS element be seen?

I am facing a challenge in my ThreeJS application where the view automatically centers on an object if it is close to the center of the view and closer than a specified distance. While I have information about the latitude and longitude of all objects and ...

Invoke the click handlers consecutively following the initial click handler using ajax requests

I have a button on my webpage that triggers multiple click events. The button code looks like this: <input type="button" id="myButton"/> There are several functions bound to the button's click event using jQuery: $("#mybutton").on("click", f ...