Javascript 响应和 ajax 请求答案

【问题标题】：Javascript response and ajax requestJavascript 响应和 ajax 请求
【发布时间】：2016-07-24 03:14:36
【问题描述】：

我有以下几点：

function wikiAjax (searchURL) {
    return Promise.resolve($.ajax({
        url: searchURL,
        jsonp: "callback",
        dataType: 'jsonp',
        xhrFields: {
            withCredentials: true
        },
    }));
}

$(".search-form").submit(function() {
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.then(function(data) {
        alert(data);
    }, function() {
        alert("The call has been rejected");
    });
});

但只有在某处放置断点（例如在wikiResponse.then 行）时，我才会得到答案。

然后看起来代码在调用返回结果之前执行，但为什么呢？承诺设置不正确吗？

非常感谢。

【问题讨论】：

是什么让你认为代码是在调用返回之前执行的？
@JesseLee 因为如果我放一个断点，我可以在警报中看到该对象。

标签： javascript jquery ajax promise es6-promise

【解决方案1】：

我认为这里可能发生的情况是浏览器正在执行除了 ajax 调用之外的表单上的默认提交事件。结果是窗口被卸载并重新加载。

试试看：

event.preventDefault();

在处理程序中。

$(".search-form").submit(function(event) {
    event.preventDefault();
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.then(function(data) {
      alert(data);
    },
    function() {
      alert("The call has been rejected");
    }
  );
});

【讨论】：

因此，如果您创建一个带有提交按钮的表单，默认情况下浏览器将通过导航到该表单的“操作”来处理该提交事件。大概您没有提供作为
元素中的属性的操作，因此浏览器将使用当前 URL 作为表单操作。结果基本上是页面刷新。由于页面在您的 ajax 调用返回之前刷新，因此它基本上被取消了。通过使用 e.preventDefault() 阻止浏览器的默认处理程序，您可以阻止浏览器刷新页面。
欢迎您！您会将其标记为已批准的答案吗？

【解决方案2】：

这里没有必要做 Promise.resolve，因为 $.ajax 调用已经返回了一个 Promise。试试这个：

function wikiAjax (searchURL) {
    return $.ajax({
        url: searchURL,
        jsonp: "callback",
        dataType: 'jsonp',
        xhrFields: {
            withCredentials: true
        }
    });
}

$(".search-form").submit(function() {
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.done(function(data) {
        alert(data);
    }).fail(function(err) {
        alert("The call has been rejected");
    });
});

这是一个工作（并修改为显示）plunker：https://plnkr.co/edit/qyc4Tu1waQO6EspomMYL?p=preview

【讨论】：

感谢@pkeuter，但使用您的解决方案它不起作用，即使有断点。
@S4rg0n 你看过 plnkr 吗？它确实有效，因此您必须以不同的方式做其他事情。如上所述，您使用的是最新版本的 jQuery 吗？

【解决方案3】：

我认为 Promise.resolve() 是一个 ES6 特性，所以除非你明确确保你支持它，否则它不应该工作。

但是，幸运的是你 $.ajax() 以以下格式返回一个承诺：

var promise = $.ajax({
  url: "/myServerScript"
});

promise.done(mySuccessFunction);
promise.fail(myErrorFunction);

（而不像你的代码中写的 then() 和 catch() 那样）

【讨论】：

谢谢@chenop，但它的行为完全相同
你用的是什么 JQuery 版本？
我有 2,2,2。 Jesse Lee 解决方案有效，问题出在表单提交上 :-) 谢谢！