在 Angular 中，通过异步调用持久化数据的最佳方式是什么？

Question

我有一个带有 for 循环的控制器，它使 HEAD 请求一组 URL 来检查文件是否存在。当我从 HEAD 请求获得响应时，我需要该请求所基于的数组中的索引号。

var allFiles = [], files = [];
allFiles.push({"url":"http://www.example.com/foo","source":"source1"});
allFiles.push({"url":"http://www.example.com/bar","source":"home"});
allFiles.push({"url":"http://www.example.com/wtf","source":"outer space"});

for(var i=0,len=allFiles.length;i<len;i++) {
    $http.head(allFiles[i].url).then(function(response) {
        files.push(allFiles[VALUE_OF_i_AT_TIME_OF_REQUEST]);
   }
}

编辑：
因为它是一个异步调用，所以我不能用 i 代替 VALUE_OF_i_AT_TIME_OF_REQUEST。这样做会导致 i 总是等于 len-1

我想我可以将索引号作为数据与请求一起发送，并从响应中检索它，但出于某种原因，这对我来说似乎是 hack-ish。

有没有更好的方法？

Answer 1

你可以用函数闭包来做到这一点

for (var i = 0, len = allFiles.length; i < len; i++) {
    function sendRequest(index) {
        $http.head(allFiles[index].url).then(function (response) {
            files.push(allFiles[index]);
        });
    }

    sendRequest(i);
}

Answer 2

我可能过于简单化了（异步代码对我来说仍然很棘手），但是你能不能在每个循环中将 i 设置为一个新的局部变量 j 然后引用 j在 files.push(allFiles[j]) 中的 i：

var allFiles = [], files = [];
allFiles.push({"url":"http://www.example.com/foo","source":"source1"});
allFiles.push({"url":"http://www.example.com/bar","source":"home"});
allFiles.push({"url":"http://www.example.com/wtf","source":"outer space"});

for(var i = 0, len = allFiles.length; i < len; i++) {
   var j = i;
   $http.head(allFiles[i].url).then(function(response) {
       files.push(allFiles[j]);
   }
}

Answer 3

我按照@rob 的建议做了一些类似的事情，它似乎起到了作用。

var allFiles = [], files = [];
allFiles.push({"url":"http://www.example.com/foo","source":"source1"});
allFiles.push({"url":"http://www.example.com/bar","source":"home"});
allFiles.push({"url":"http://www.example.com/wtf","source":"outer space"});

for(var i=0,len=allFiles.length;i<len;i++) {
    (function(i) {
        $http.head(allFiles[i].url).then(function(response) {
            files.push(allFiles[i]);
        }
    })(i);
}

在 Angular 中，通过异步调用持久化数据的最佳方式是什么？

In Angular, what's the best way to persist data through an asynchronous call?

asynchronous

http

angularjs