0

I have the following code structure :

var firstPagePromise = $.ajax('url1').then(function (data) {
  //do stuff
});

var secondPagePromise = $.ajax('url2').then(function (data) {
  //do stuff
});

$.when(firstPagePromise, secondPagePromise).done(function () {
  // do stuff
});

I want to execute some code after doing two request using JQuery.when() . Written like this, it's working, but I would like to put the two requests in functions for easier maintenance of the code and I'm unsure how to do that.

function fetchFirstPage() {
  var firstPagePromise = $.ajax('url1').then(function (data) {
    //do stuff
  });

  return firstPagePromise;
}

var firstPagePromise = fetchFirstPage();

// same for the second page ...

$.when(firstPagePromise, secondPagePromise).done(function () {
  // do stuff
});

this does not work and seems to fire when() without waiting for the execution of the two functions, is there any way I could execute the code in the when function only if the two previous function have ended ?

The following code shows my issue on a minimal example, I'd like to get the variable title to print in the console after the call to when but I get "undefined" instead. I think that I understand what's going on, inside the function fetchPage(), title is returned before the request finishes. I think that a callback function could resolve the issue, however, is there any other way ?

function fetchPage() { //fetch the random start page
     var title;
    var pagePromise = $.ajax('https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&list=random&continue=-||&rnnamespace=0&rnlimit=1').then(function (data) {
        title = data.query.random[0].title;
        console.log("in request : " + title);

    });
    console.log("in function return : " + title);
    return [title,pagePromise];
}

var firstPageResult = fetchPage();
var title = firstPageResult[0];
var pagePromise = firstPageResult[1]; 

$.when(pagePromise).done(function() {
    console.log("in when : " + title);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
nathan raynal
  • 151
  • 11
  • 2
    It [works](https://jsfiddle.net/avw2b81e/) for this simple example. So the problem seems to be located elsewhere. – Yoshi Nov 30 '20 at 12:26
  • 1
    It [works](https://jsfiddle.net/avfndw5o/) also for a pure jQuery version -> please add a [mcve] that shows the actual problem – Andreas Nov 30 '20 at 12:31
  • ok thank you I'm going to modify my question to add the reproducible example – nathan raynal Nov 30 '20 at 12:33
  • I just added a minimal reproducible example – nathan raynal Nov 30 '20 at 12:58
  • 2
    The codes in your first and second snippet both work. In your last snippet, you're not passing the `pagePromise` to `$.when` but the `firstPageResult` array. – Bergi Nov 30 '20 at 13:08
  • 1
    Btw, that `title` variable absolutely doesn't work, you must wait for the promise to access it and you cannot `return` a value before it's available. You must return a promise for it. Use `then` (like you already do) and `return` the title from it, so that you get a promise for the title string. – Bergi Nov 30 '20 at 13:10

0 Answers0