javascript - popup.js 中的 Chrome 扩展 POST 异步请求

Question

真的很抱歉，不得不再次询问，但是有人遇到过这样的情况吗

我有一个带有登录表单的 popup.js，我想向一个 API 发送一个请求，该 API 返回一个包含 API key 的对象，该 key 稍后将用于验证用户身份。我的问题是，如果我发送请求(它是一个 POST 请求)并且我设置了参数 async: false 一切都工作正常，但是如果我尝试按照应有的方式异步执行它，因为它毕竟被称为 AJAX，我的回调执行得太快了，在 POST 请求完成且响应代码为 0 之前，它就失败了。

这是我尝试过的:在我的 HTML 中，我有一个带有带有事件监听器的按钮的表单

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

以及 popup.js 文件内的我的 SubmitLoginForm 方法

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

之后，我为 url、方法、postData 设置了一个变量，最重要的是为 async: false 的值设置了一个变量然后我像这样提出请求

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 是我组装的东西，所有字段的值都没有问题，但问题是正如我所说，仅当我将 async 设置为 false 时， request.onload 中的 console.log 才会显示 ，但每当我将其设置为 true 时，它​​甚至不会触发 console.log

PS。我已经用 jQuery 尝试了完全相同的操作，只是为了测试它，它的行为与如下代码完全相同:

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));
            }
        });

我唯一能想到的要弄清楚为什么它会这样的行为是，开发 chrome 扩展的知识匮乏是 0，而且我错过了一些非常明显的东西。

我的 list 实际上不应该成为问题，它只是工作的基本要素，没有什么特别的，正如我所说，同步请求有效，所以它不应该真正成为 list .json 的问题

PS。经过一些测试后，我在网络选项卡中看到，当我设置为异步代码时，我的请求显示(已取消)，但没有明显的取消原因或任何错误代码。我是否可能需要某个 header ？

Answer 1

经过一些优秀且知识渊博的人的一些评论后，官方答案是 Xan 发布的。实际上我自己想出了这个办法，但他提供了非常需要的关于为什么它实际上有效的信息，所以谢谢你。

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