如何在一個文件列表中以循環的角度做同步http請求？

Question

它總是上傳第一個文件在一個數組 餘米遍歷圖像文件的列表，用於發送它們通過HTTP上傳

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

另一種方法繼續處理異步操作可以使用遞歸函數減少和排列圖像，如果你喜歡做不同的事情。

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

爲了讓您順序請求您可以使用承諾。

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

您可以使用$q.all作爲執行多個異步請求的簡單方法。

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 
})