Calling multiple $http services in a for loop from Angularjs controller and services javascript promise issue

问题

My Angularjs application have a controller and services java scripts. Services call WCF REST services using $http. I need to call multiple services in a For loop based on data in object used in For loop. Below is the scenario:

"I want to upload few files to a folder on server and save file names to database. I have an array of file details that user selected to upload. I want to verify file names already in database (based on EntityId) then rename new file before uploading to server." So below is the for loop and service calls:

for (var i = 0; i < filesDataToUpload.length; i++) {

        var fileDataToUpload = filesDataToUpload[i];

        FileUploadService.GetUploadDetailsByEntityId(fileDataToUpload.ENTITY_ID).success(function (response) {
            $scope.UploadDetailsByEntity = response;
        });

        var newFileName = VerifyAndRenameBeforeSave(fileDataToUpload, $scope.UploadDetailsByEntity);

        FileUploadService.UploadFile(newFileName, fileData).success(function (data) {
            //some code
        }).error(function (error) {
            $scope.error("An error occured while uploading file -" + error.ExceptionMessage);
            isSuccess = false;
        });

        FileUploadService.InsertUploadDetails(FileUploadDetails).success(function (data) {
            //some code
        }).error(function (error) {
            $scope.error("An error occured while creating the Entity -" + error.ExceptionMessage);
            isSuccess = false;
        });

    }

Problem: Problem:

My problem is - I do not get the response from first service call that I want to use in subsequent methods of verifying and renaming the files and saving to database. I found that it is because of the promise behavior of $http. So I moved my file verify and renaming methods and save part of functionality inside the

.success(function(response){
//verify that file does not already exists and rename it to the next number of file
//upload the file to the server

//Save new file name and other details to the database
}

But it works only for first time and not the next iteration of the for loop. For second iteration it retrives the record for first EntityId.

I already checked this and this

Can any one help me to get this resolved?

回答1:

It's happening because the .success function returns a promise while it actually waits for the async task's response. Try it like this -

for (var i = 0; i < filesDataToUpload.length; i++) {
        var fileDataToUpload = filesDataToUpload[i];
        FileUploadService.GetUploadDetailsByEntityId(fileDataToUpload.ENTITY_ID).success(function (response) {
            $scope.UploadDetailsByEntity = response;
            var newFileName = VerifyAndRenameBeforeSave(fileDataToUpload, $scope.UploadDetailsByEntity);

            FileUploadService.UploadFile(newFileName, fileData).success(function (data) {
                    //some code
                    FileUploadService.InsertUploadDetails(FileUploadDetails).success(function (data) {
                            //some code
                    }).error(function (error) {
                            $scope.error("An error occured while creating the Entity -" + error.ExceptionMessage);
                            isSuccess = false;
                    });
            }).error(function (error) {
                    $scope.error("An error occured while uploading file -" + error.ExceptionMessage);
                    isSuccess = false;
            });
        });
}

来源：https://stackoverflow.com/questions/36457499/calling-multiple-http-services-in-a-for-loop-from-angularjs-controller-and-serv

标签

javascript

angularjs

rest

http

angular-promise