如何在文件列表的循环中以角度进行同步http请求？

Question

It is always uploading first file in an array I m looping over a list of image files for sending them over http as uploads

for(var j=0;j<images.length;j++){
    (function(idx,images){
        console.log("idx"+JSON.stringify($scope.Files)+"====="+JSON.stringify(images));
        var data = {"image":images[idx]};
        var payload = new FormData();
        for(var key in data){
            payload.append(key, data[key]);
        }

        $http({
            url: uploadUrl,
            method: 'POST',
            data: payload,
            //assign content-type as undefined, the browser
            //will assign the correct boundary for us
            headers: {'token':token,'Access-Control-Allow-Origin': '*','Content-Type': undefined},
            //prevents serializing payload.  don't do it.
            transformRequest: angular.identity
        }).then(fucntion(response){
            console.log("response :" + JSON.stringify(response));
        });
    })(j,images);
}

Answer 1

Another approach to sequentially handle async operations could be to use a recursive function to reduce and array of images if you fancy doing somthing different.

function upload(images) {

    var image = images[0]; //the  fist item in the array of images

    var data = {
        image: image
    };

    var payload = new FormData();

    payload.append('image', data);

    $http({
        url: uploadUrl,
        method: 'POST',
        data: payload
    }).then(function (response) {

        console.log(response);

         images.shift(); //Edit: Fixed this bit

        if (images.length) {
            upload(images); //call the upload function again
        }
        else {
            console.log('all images uploaded'); //When the arrays length is 0 all images have been uploaded
        }

    });
}

upload(myArrayOfImagesInHere); //Initially call the function here with an array of images or things you want uploaded.

Answer 2

To make you request sequentially you can use promises.

var promisesChain;
var currentHttpPromise;
var getHttpRequest=function(uploadUrl,payload,token){
  return $http({
           url: uploadUrl,
           method: 'POST',
           data: payload,
           //assign content-type as undefined, the browser
           //will assign the correct boundary for us
           headers: {'token':token,'Access-Control-Allow-Origin': '*','Content-Type': undefined},
          //prevents serializing payload.  don't do it.
          transformRequest: angular.identity
          }).then(fucntion(response){
             console.log("response :" + JSON.stringify(response));
          });
}
for(var j=0;j<images.length;j++){
    (function(idx,images){
        console.log("idx"+JSON.stringify($scope.Files)+"====="+JSON.stringify(images));
        var data = {"image":images[idx]};
        var payload = new FormData();
        for(var key in data){
            payload.append(key, data[key]);
        }

        if(idx==0){
          promisesChain=getHttpRequest(uploadUrl,payload,token);
        }
        else{
          (function(uploadUrl,payload,token){
              promisesChain.then(function(){ 
                return getHttpRequest(uploadUrl,payload,token)
              },
              function(){
                 //Error
              });
          })(uploadUrl,payload,token);

        }
    })(j,images);
}

Answer 3

You can use $q.all as an easy way of doing multiple async requests.

var promises = [];
for(var j=0;j<images.length;j++){
    (function(idx,images){
        console.log("idx"+JSON.stringify($scope.Files)+"====="+JSON.stringify(images));
        var data = {"image":images[idx]};
        var payload = new FormData();
        for(var key in data){
            payload.append(key, data[key]);
        }

        var promise = $http({
            url: uploadUrl,
            method: 'POST',
            data: payload,
            //assign content-type as undefined, the browser
            //will assign the correct boundary for us
            headers: {'token':token,'Access-Control-Allow-Origin': '*','Content-Type': undefined},
            //prevents serializing payload.  don't do it.
            transformRequest: angular.identity
        });
        promises.push(promise)
    })(j,images);
}

$q.all(promises)
.then(function(responses) {
    // responses available here
})