javascriptajaxpjax

How to cancel all other ajax requests?


I have a SPA website.

When I send request A, I find I clicked wrong link. So I click and send request B before complete request A. So I want to abort request A and all other requests. I tried XMLHttpRequest.abort(); but it is only abort request B.

Simple Source Code :

function link(){
const request=new XMLHttpRequest();
request.open('GET','//example.com/',true);
request.send();
request.onload=()=>{
console.log('Loaded');
}
}

Full Source Code :

link(to){
    const requeset=new XMLHttpRequest();
    request.open('GET','/api/window.location,true);
    request.send();
    request.onload=function(){
    console.log('hello!');
    }
}

Solution

  • You can keep a reference to the previous request something like...

    var lastRequest = null;
    
    // Loop through all action buttons
    document.querySelectorAll('button.action').forEach(button => {
    
        // Attach a click event listener
      button.addEventListener('click', event => {
        event.preventDefault();
    
            // If there was a previous request, kill it.
        if (lastRequest) {
          lastRequest.abort();
          lastRequest = null;
        }
    
            // Now make the new request and store the reference.
        lastRequest = new XMLHttpRequest();
        lastRequest.open('GET', 'https://reqres.in/api/users?delay=3');
        lastRequest.onload = () => {
          lastRequest = null; // We reset the last request reference on load.
        };
        lastRequest.send();
      });
    })
    <button class="action">Action 1</button>
    <button class="action">Action 2</button>


    UPDATE

    function link(to) {
    
        // If there was a previous request, kill it.
        if (window._myLastLinkRequest) {
            window._myLastLinkRequest.abort();
            window._myLastLinkRequest = null;
        }
    
    
        const request = new XMLHttpRequest();
        
        request.open('GET','/api/' + window.location, true);
        request.onload = function() {
            console.log('hello!');
            window._myLastLinkRequest = null; // We reset the last request reference on load.
        };
        request.send();
    
        // Now store the reference to the new request.
        window._myLastLinkRequest = request;
    }