Javascript response and ajax request

Question

I have the following:

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

But i get an answer only if I put a breakpoint somewhere (eg at the wikiResponse.then line).

Then it looks like the code is executed before the call returns the result but why? Isn't the promise set properly?

Many thanks in advance.

Answer 1

I think what might be happening here is the browser is executing the default submit event on the form in addition to the ajax call. The result is that the window is unloaded and reloaded.

Try putting:

event.preventDefault(); 

in the handler.

$(".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");
    }
  );
});

Answer 2

It's unnecessary to do Promise.resolve here, because the $.ajax call already returns a promise. Try this:

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

This is a working (and modified to show) plunker: https://plnkr.co/edit/qyc4Tu1waQO6EspomMYL?p=preview

Answer 3

I think Promise.resolve() is an ES6 feature so unless you explicitly make sure you support it it should not work.

But, lucky for you $.ajax() return a promise in the following format:

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

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

(and not with then() and catch() like was written in your code)