popup.js中的Chrome扩展程序POST异步请求

Question

I'm really sorry to have to ask again, but has anyone ever come to such a case

I have a popup.js that has a login form and I want to send a request to an API that returns an object containing API key that will later be used to authenticate the user. My problem is that if I send the request (it is a POST request) and I set the parameter async: false everything is working fine, but if I try to do it asynchronously as it should be, since it's called AJAX after all, my callback just executes way too fast, before the POST Request is finished and the response code is 0 and it just fails.

Here is what I've tried: in my HTML I have a form with a button with an eventListener

document.getElementById('login-btn').addEventListener('click', submitLoginForm, false);

and my submitLoginForm method that is inside a popup.js file

function submitLoginForm() {
            userEmail = document.getElementById('email').value,
            userPassword = document.getElementById('password').value;

after that I set a variable for the url, for the method, for the postData, and most importantly for the value of async: false then I make the request like this

var request = new XMLHttpRequest();

        request.onload = function() {
            var status = request.status;
            var data = request.responseText;
            console.log('status is ' + status + '\n data is ' + data);
        }

        request.open('POST', 'correct-url-here', true/false);

        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

        request.send(postData);

postData is something I've assembled and everything with the values of all fields is okay, but the problem is as I said that the console.log inside request.onload is displaying only if I set the async to false , but whenever I set it to true it just doesn't even fire the console.log

PS. I've tried the exact same thing with jQuery, just to test it out and it was behaving exactly the same with a code like this:

jQuery.ajax({
            type: "POST",
            url: url,
            data: postData,
            async: false, // if false -> success, if true - doesnt fire the alert..
            success: function(data) {
                console.log(data);
                alert('IMINSUCCESS' + JSON.stringify(data));
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(JSON.stringify(jqXHR));
            }
        });

The only thing I could think of to sort of figure out why it behaves like this is that the lack knowledge in developing chrome extensions is 0 and I'm missing something quite obvious.

My manifest shouldn't really be an issue, it has just the bare essentials to work, nothing special and as I said, sync request works, so it shouldn't really be a problem with the manifest.json

PS. After a little testing I saw that in the Network tab when Im set to async code my request says (canceled) but there is no apparent reason for the cancelation or any error code. Is it possible that I may need a certain header?

Answer 1

After a few comments from some good and more knowledgable folks the official answer is that posted by Xan. I actually figured it out on my own but he provided the much needed info about Why it actually worked, so thank you.

preventDefault works because the default action for a form submit button causes the page to navigate - and that destroys your listener. A simpler fix would me making #login-btn with type="button" as opposed to default submit. – Xan 2 days ago