Как получить данные из нескольких вызовов ajax?

Question

Здесь я вызываю fetchbookAllNew() метод от fetchBooks(), но с этим загрузчиком ajax не работает должным образом. Что я хочу, когда fetchBooks называется загрузчиком ajax, должен отображаться до тех пор, пока все данные не будут получены в функции .done.

$scope.fetchBooks = function(){ 
     $(".loader").show(); 
     $.when(

       fetchbookAllNew("all"), 
       fetchbookAllNew("epub"), 
       fetchbookAllNew("collection"), 
       fetchbookAllNew("video"), 

      ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){ 

        $scope.allkitabooBooks = publishedAll; 
       $scope.allEpubBooks =publishedEpub; 
       $scope.allcollectionbooks = publishedColl; 
       $scope.allvideosbooks = publishedVideo; 

       $(".loader").fadeOut("slow"); 
       }); 


    }; 

    var fetchbookAllNew = function(status){ 
      var books = undefined; 

      $.ajax({ 
        url:'/booksList', // Dynamically uploads the files which is chosen. 
        type: 'GET', 

        headers : { 
         'usertoken' : $rootScope.userDetails.userToken, 
         'status':status 
          }, 
        cache: false, 
        async: false, 
        processData: false,   // Don't process the files 
        contentType:'application/json', // Setting content type to "application/octet-stream"/"undefined" as jQuery will tell the server its not query string. 

        success: function (data) { 
         books=data; 

        }, 
        error: function (data) { 

        } 
       }); 
      return books; 

     }; 

Answer 1

Это должно сделать это, вам нужно вернуть обещание ajax, а не результат. done() решает результат для вас. More info

$scope.fetchBooks = function(){ 
     $(".loader").show(); 
     $.when(
       fetchbookAllNew("all"), 
       fetchbookAllNew("epub"), 
       fetchbookAllNew("collection"), 
       fetchbookAllNew("video"), 
      ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){ 
       // Each argument is an array with the following 
       //     structure: [ data, statusText, jqXHR ] 
       //so [0] is data 
       $scope.allkitabooBooks = publishedAll[0]; 
       $scope.allEpubBooks =publishedEpub.data[0]; 
       $scope.allcollectionbooks = publishedColl.data[0]; 
       $scope.allvideosbooks = publishedVideo.data[0]; 
       $(".loader").fadeOut("slow"); 
       }); 
    }; 

    var fetchbookAllNew = function(status){ 
      return $.ajax({ 
        url:'/booksList', // Dynamically uploads the files which is chosen. 
        type: 'GET', 
        headers : { 
         'usertoken' : $rootScope.userDetails.userToken, 
         'status':status 
          }, 
        cache: false, 
        //async: false,//don't EVER do this 
        processData: false,   // Don't process the files 
        contentType:'application/json', // Setting content type to "application/octet-stream"/"undefined" as jQuery will tell the server its not query string. 
       }); 
     }; 

Никогда не используйте ajax:false. Он побеждает объект обещаний и ajax.