循环内的承诺：TypeScript + Angular + IndexedDB

Question

我正在开发一项数据同步服务，该服务从 Web 服务中提取数据，然后将其存储在 IndexedDB 中。

我在我的 TypeScript Angular 服务中做这样的事情：

this.http
    .post(postUrl, postData)
    .success((data: any, status, headers, config) => {

         console.log("post success");
         console.log("results:");
         console.log(data);

         var records = data.Records;
         var promiseStack = [];

         for (var i = 0; i < records.length; i++) {

             var element = records[i];
             var key = this.dataService.getKeyFromElement(objectStoreConfig, element);

             console.log("key: " + key);

             this.dataService.keyExists(objectStoreConfig, key).then((update) => {

                 if(update){
                     // TODO: put
                     promiseStack.push(true);
                 } else {
                     console.log("using dataService to add to objectStore...");
                     console.log("adding: " + key);
                     this.dataService.add(element, objectStoreConfig).then((result) => {
                         promiseStack.push(result);
                     });
                 }
             });

         }

         this.q.all(promiseStack).then((result) => {
             console.log("done adding/updating all.");
             deferred.resolve(result);
         });
    })
    .error((data, status, headers, config) => {
    });

我在控制台中收到一个post success，以及我预期的每个返回的record key。问题在于对我的DataService 的异步调用。 this.dataService.add 函数实际上是创建事务并将记录添加到 IndexedDb。

我的控制台中的输出（在 IndexedDB 的状态下 - 只有一条记录的键为 188）表明此代码示例仅在我的 @ 上调用了 add 函数987654329@ 表示records 中的最后一个元素。

控制台输出：

post success
results:
Object
key: 78 
key: 194
key: 188
done adding/updating all. 
using dataService to add to objectStore...
adding: 188
using dataService to add to objectStore...
adding: 188
using dataService to add to objectStore...
adding: 188  

如何以不同的方式构建我的代码以使 for 循环“等待”每个异步调用完成？

Answer 1

方法 1（仅适用于您的目标是 ES6）

如果您使用的是 TypeScript 1.5，您可以只使用 let 而不是 var 来声明您的元素和键变量：

let element = records[i];
let key = this.dataService.getKeyFromElement(objectStoreConfig, element);

问题是element 和key 在函数的范围内而不是for 循环，所以每次for 循环迭代它只是替换element 和key 变量而不是创建新变量。如果您使用let，那么变量将在 for 循环的范围内。

更多详情请见What's-new-in-TypeScript。

方法 2

或者，您也可以使用 Array.forEach 代替 for 循环，因为这也可以解决范围问题：

records.forEach(function(element) {
    //...
});