JSFiddle - React, Tailwind, and code Playground

HTML

<input id="submit" type="button" value="Send" />
<input id="cancel" type="button" value="Cancel" />

JavaScript

function aborted() {
    console.log('Cancelled: ' + this.status);
}

function loaded() {
    console.log('Loaded: ' + this.status);
}

function request(url) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', loaded, false);
    xhr.addEventListener('abort', aborted, false);
    
    xhr.open('POST', url);
    xhr.send(null);
    
    return xhr;
}

document.getElementById('submit').addEventListener('click', function () {
    var xhr = request('/echo/json?delay=5'),
        submit = this,
        cancel = document.getElementById('cancel');
    
    function detach() {
        submit.removeEventListener('click', canceling, false);
        cancel.removeEventListener('click', canceling, false);
    }
    
    function canceling() {
        detach();
        xhr.abort();
    }
    
    // detach any remaining handlers after XHR finishes
    xhr.addEventListener('load', detach, false);
    
    // cancel if "Submit" is clicked again before XHR finishes
    submit.addEventListener('click', canceling, false);
    
    // and, of course, cancel if "Cancel" is clicked
    cancel.addEventListener('click', canceling, false);
}, false);