What may be causing my Ajax call to get stuck at readystate 1 and not progress further

Question

What may be causing my Ajax call to get stuck at readystate 1 and not progress further

I've double-checked all my code, yet I'm not getting any response from my Ajax call. Can someone help me figure out what's wrong?

function fetchPokemonData() {

const apiRequest = new XMLHttpRequest();

apiRequest.open('GET', 'https://pokeapi.co/api/v2/pokemon', true);
console.log(apiRequest.readyState);

apiRequest.onload = function() {
    if(apiRequest.status === 200 ) {
        console.log(true)
        let data = JSON.parse(apiRequest.responseText);
        console.log(data)
        for(let item in data) {
            console.log(data[item])
        }
    }
}
console.log(apiRequest.readyState)
apiRequest.send()
}

The readystate remains stuck at 1 and I can't seem to find the issue.

javascript ajax

Answer 1

Answer №1

xhr.readyState may not provide the solution you are looking for with the code as it is written; it would be helpful to troubleshoot whether onload is being executed.

console.log(xhr.readyState); // synchronous
xhr.onload = function() {
   // asynchronous code inside the function call, triggered by onload event
}; 
console.log(xhr.readyState) // synchronous, does not wait for AJAX response

If you place console.log(xhr.readyState) within your callback function, it will display different values, but don't forget to handle onerror as well...

I recommend utilizing the addEventListener listeners API instead of traditional event handlers.

Hopefully this information proves useful!

Answer 2

xhr.readyState may not provide the solution you are looking for with the code as it is written; it would be helpful to troubleshoot whether onload is being executed.

console.log(xhr.readyState); // synchronous
xhr.onload = function() {
   // asynchronous code inside the function call, triggered by onload event
}; 
console.log(xhr.readyState) // synchronous, does not wait for AJAX response

If you place console.log(xhr.readyState) within your callback function, it will display different values, but don't forget to handle onerror as well...

I recommend utilizing the addEventListener listeners API instead of traditional event handlers.

Hopefully this information proves useful!

What may be causing my Ajax call to get stuck at readystate 1 and not progress further

Answer №1

Similar questions

The output of new Date() varies between app.js and ejs

Suggestions for returning success from server side to ajax call in Ember.js

Having trouble with installing Recharts through npm

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

"Disabling a FormControl within a FormArray in Angular 4: A Step-by-

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Is it possible to identify the form triggering the ajax call within a callback function?

Using JavaScript to dynamically retrieve element IDs

Allow users to copy and paste on a website where this function is typically restricted

I am looking to modify the visibility of certain select options contingent upon the value within another input field by utilizing ngIf in AngularJS

Utilizing the useEffect hook to display a notification banner when a message is present, along with implementing useState for managing the state of that message

Each styled component will yield the respective type definitions using (@types/styled-components)

Tips for generating a dynamic Array name to be sorted with React JS

The correct pattern must not be matched by ng-pattern

Establishing foreignObject coordinates in Angular

Using JavaScript and node.js, make sure to wait for the response from socket.on before proceeding

Converting a LovelySoup AJAX table into JSON Format

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

Empty initial value for first item in array using React hooks

Transferring information between an ASP web form page and an Angular2 application