Javascript 如何在文件列表上循环执行同步http请求？

它总是上传数组中的第一个文件 我在一个图像文件列表上循环，以便通过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);
}

---

for（var j=0；j另一种顺序处理异步操作的方法是使用递归函数来减少图像的数量和数组，如果您想做一些不同的事情的话

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.

另一种顺序处理异步操作的方法是，如果您想做一些不同的事情，可以使用递归函数来减少和减少图像数组

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.

要按顺序提出请求，可以使用承诺

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

var承诺；
var-currentHttpPromise；
var getHttpRequest=函数（上传URL、有效负载、令牌）{
返回$http({
url：上传url，
方法：“POST”，
数据：有效载荷，
//在浏览器中将内容类型指定为未定义
//将为我们指定正确的边界
标题：{'token'：标记，'Access-Control-Allow-Origin'：'*'，'Content-Type'：未定义}，
//防止序列化有效负载。不要这样做。
转换请求：angular.identity
}).然后（功能（响应）{
log（“响应：+JSON.stringify（响应））；
});
}
对于（var j=0；j要按顺序提出请求，可以使用承诺

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

var承诺；
var-currentHttpPromise；
var getHttpRequest=函数（上传URL、有效负载、令牌）{
返回$http({
url：上传url，
方法：“POST”，
数据：有效载荷，
//在浏览器中将内容类型指定为未定义
//将为我们指定正确的边界
标题：{'token'：标记，'Access-Control-Allow-Origin'：'*'，'Content-Type'：未定义}，
//防止序列化有效负载。不要这样做。
转换请求：angular.identity
}).然后（功能（响应）{
log（“响应：+JSON.stringify（响应））；
});
}
对于（var j=0；j，您可以使用
$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
})

var承诺=[]；
对于（var j=0；j，您可以使用
$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
})

var承诺=[]；
对于（var j=0；jso）您想从映像数组中依次发送http请求（uploadUrl-POST）？是的，请帮助我解决此问题，以便您发送http请求（uploadUrl-POST）从图像数组中一个接一个地执行？是的，请帮我处理这个可能的$q副本。all不能确保所有承诺都会按顺序执行啊，错过了要求$q。all不能确保所有承诺都会按顺序执行啊，错过了要求仍然得到相同的结果具有相同的结果你是说http调用不是按顺序进行的？对于第一个映像，它是好的，之后它直接上载最后一个映像多次仍然获得相同的结果具有相同的结果您的意思是http调用不是按顺序进行的？对于第一个映像，它是好的，之后它直接上载最后一个映像多次对于第一个映像，它是好的，之后它是好的正在多次直接上载上一个图像在我的示例中有一个错误行
images=images.shift（）
应该是
images.shif（）
。已更新了我的示例。对于第一个图像，它是好的，之后它将多次直接上载上一个图像在我的示例中有一个错误行
images=images.shift（）
应该是
images.shif（）
。已经更新了我的示例。