javascript - 如何使用 $http 进行同步 http 请求循环？

Question

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

这是负责此操作的代码:

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

注意:粗略地说，可能没有把所有的“i”和“t”都画出来，但想必基本原理是清楚的。