popup.js 中的 Chrome 扩展 POST 异步请求答案

【问题标题】：Chrome Extension POST async request in popup.jspopup.js 中的 Chrome 扩展 POST 异步请求
【发布时间】：2016-07-01 07:43:20
【问题描述】：

真的很抱歉再次询问，但是有没有人遇到过这种情况

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

这是我尝试过的：在我的 HTML 中，我有一个带有 eventListener 按钮的表单

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 是我组装的东西，所有字段的值都可以，但问题是，正如我所说，只有当我将异步设置为 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，而且我遗漏了一些非常明显的东西。

我的清单不应该真的是一个问题，它只是工作的基本要素，没有什么特别的，正如我所说，同步请求有效，所以 manifest.json 不应该真的有问题

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

【问题讨论】：

既然您正在构建一个扩展，请尝试使用window.fetch 和FormData，也许这样可以解决问题（并避免使用过时的API）。如果仍然失败，则可能是您的浏览器损坏（尝试新的配置文件）、表单数据损坏或两者兼而有之。
我实际上只是通过添加 e.preventDefault(); 来解决它在单击事件处理程序的开头，但感谢您的提示，我只是 Chrome 扩展的超级新手，所以我将进一步研究您提到的这两件事
async: false 是阻塞的，它在完成之前不会触发回调，这很正常。您可能应该阅读有关同步/异步的内容。
@GeorgiDimitrov 考虑将其发布为答案并将其标记为已接受，以突出显示解决方案并将问题标记为已解决。
preventDefault 之所以有效，是因为表单提交按钮的默认操作会导致页面导航——这会破坏您的侦听器。一个更简单的解决方法是让我使用type="button" 制作#login-btn，而不是默认提交。

标签： javascript jquery ajax asynchronous google-chrome-extension

【解决方案1】：

经过一些优秀且知识渊博的人的几次cmet，官方答案是Xan发布的。我实际上是自己想出来的，但他提供了急需的信息，说明为什么它确实有效，所以谢谢。

preventDefault 有效，因为表单提交的默认操作按钮使页面导航 - 这会破坏您的听众。一个更简单的解决方法是让我使用 type="button" 来制作 #login-btn 默认提交。 – Xan 2 天前

【讨论】：