Question

我有一个视频对象列表，每个对象都有一个链接和其他一些属性。我已经建立了一个循环，通过这个列表并通过他们的链接上传这些视频，我目前使用的服务，不支持一次上传多个视频，我需要等待第一个视频上传后我需要第二个上传..etc

以下是负责此事的代码：

$scope.upload = function(){
    $scope.videoList.forEach(function(video){
        video.state = "Downloading"
        $scope.msg = "The video is downloading"
    $http.post("/download",{link : video.link,title : video.title}).then(function(resp){
      $scope.msg = "The video has been downloaded on the server, it will now start uploading"
      var filen = resp.data["fn"]
      var title = resp.data["title"]
        video.state = "Uploading"
      $http.get("/uploadVid?file=" + filen +"&title=" + title).then(function(resp){
        if (resp.data == "0002"){
        alert( "You didn't authorize the App yet, please authorize it to be able to use it .")
      }
      if (resp.data == "000X"){
        alert("An error occured, please retry .")
      }
      else{
        $scope.msg = "the video uploaded, here's the link: " + resp.data
        video.state = "Done"
        video.link = resp.data
      }
      } )
    })

    }) }

这里会发生什么，是我们在服务器上下载的每个视频，一旦下载，它就会上传到视频托管服务（在我们的案例中为youtube）。这应该可以正常工作，但由于$http服务调用的异步性质，它们都会同时开始下载并同时上传。

循环不等待迭代完成并直接进入下一次迭代。我希望这是同步的，视频应该逐个下载和上传。我宁愿不使用Promises Interface，我很匆忙，我对它们了解不多。如果你这样做，请尽可能多地解释。

Answer 1

您想要发出请求同步。您做想要使它们顺序。（同步 ajax请求是一个支持JavaScript UI线程的请求 - 通常是浏览器的UI，至少在该选项卡中 - 等待ajax操作完成。这会导致糟糕的用户体验。按顺序执行只意味着一个接一个地做，例如按顺序而不是并行。）

通常的方法是跟踪你在哪一个，进行处理，然后完成那个处理后，继续下一个;见评论：

$scope.upload = function() {
    // Grab the array and start with index = 0
    var videos = $scope.videoList;
    var index = 0;
    if (videos.length) {
        // Start the process
        next();
    }

    // Our handler for each video
    function next() {
        // Get the video
        var video = videos[index];
        video.state = "Downloading"
        $scope.msg = "The video is downloading"
        $http.post("/download", {
            link: video.link,
            title: video.title
        }).then(function(resp) {
            $scope.msg = "The video has been downloaded on the server, it will now start uploading"
            var filen = resp.data["fn"]
            var title = resp.data["title"]
            video.state = "Uploading"
            $http.get("/uploadVid?file=" + filen + "&title=" + title).then(function(resp) {
                if (resp.data == "0002") {
                    alert("You didn't authorize the App yet, please authorize it to be able to use it .")
                }
                if (resp.data == "000X") {
                    alert("An error occured, please retry .")
                } else {
                    $scope.msg = "the video uploaded, here's the link: " + resp.data
                    video.state = "Done"
                    video.link = resp.data

                    // Do the next video now we've finished this one
                    if (++index < videos.length) {
                        next();
                    }
                }
            })
        })
    }
}

注意：隐藏起来，可能没有全部交叉和点缀，但可能基本面很明显。

如何使用$ http创建一个同步http请求循环？

1 个答案: