jquery - 如何从多个ajax调用中获取数据？

Question

这里我从 fetchBooks() 调用 fetchbookAllNew() 方法，但使用这个 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 promise ，而不是结果。 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。它击败了 Promise 和 Ajax 的对象。