如何在forEach循环中使用promise来填充对象 [英] How to use promise in forEach loop of array to populate an object

问题描述

我正在一个数组上运行一个forEach循环，并进行两个调用，它返回promise，我想填充一个对象，如 this.options ，然后做其他的事情用它。现在我遇到了异步问题，如果我使用下面的代码示例，我进入了第二个函数。

  $ .when.apply（$，someArray.map（function（item）{
 return $ .ajax（{...}）。then（function（data）{...}）; 
} ））。然后（函数（）{
 //所有ajax调用现在完成
}）; 
  

这是下面的工作代码，但它只适用于数组中的第一个元素，响应的 .then 中的结果函数。我想首先为数组的所有元素执行所有的提取操作，然后调用所得到的函数来执行某些操作。

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $数组$。 forEach（function（element）{
return developer.getResources（element）
.then（（data）=> {
name = data.items [0];
return （（response）=> {
fileContent = atob（response.content）;
self.files。 push（{
fileName：fileName，
fileType：fileType，
content：fileContent
}）;
self.resultingFunction（self.files）
} ）.catch（（error）=> {
console.log（'Error：'，error）;
}）
}）;

如何填充 self.files forEach循环完成后的对象，然后用文件对象调用结果函数？

解决方案

Promise.all（） p>

  var promises = []; 
 
 array.forEach（function（element）{
 promises.push（
 developer.getResources（element）
 .then（（data）=> {
 name = data.items [0]; 
 return developer.getResourceContent（element，file）; 
}）
 .then（（response）=> {
 fileContent = atob（response.content）; 
 self.files.push（{
 fileName：fileName，
 fileType：fileType，
 content：fileContent 
}）; （错误）=> {
 console.log（'Error：'，error）; 
}）
）; 
}） ; （$）
 
 Promise.all（promises）.then（（）=> 
 self.resultingFunction（self.files）
）; 
  

这将启动每个项目的AJAX调用，将每个调用的结果添加到 self.files 完成调用并在所有调用完成后调用 self.resultingFunction（）。

编辑：根据Yury Tarabanko的建议进行简化

I am running a forEach loop on an array and making two calls which return promises, and I want to populate an object say this.options, and then do other stuff with it. Right now I am running into the async issue if i use the following code sample and i get into the then function first.

$.when.apply($, someArray.map(function(item) {
    return $.ajax({...}).then(function(data){...});
})).then(function() {
    // all ajax calls done now
});

This is working code below, but it only works for the first element in the array, because I call the resulting function in the .then of the response. I want to do all the fetch first for all elements of the array and then call the resulting function to do something.

array.forEach(function(element) {
    return developer.getResources(element)
        .then((data) = > {
            name = data.items[0];
            return developer.getResourceContent(element, file);
        })
        .then((response) = > {
            fileContent = atob(response.content);
            self.files.push({
                fileName: fileName,
                fileType: fileType,
                content: fileContent
            });
            self.resultingFunction(self.files)
        }).catch ((error) = > {
            console.log('Error: ', error);
        })
});

How do i populate the self.files object after the forEach loop is complete, and then call the resulting function with the files object?

解决方案

Promise.all() will be helpful here:

var promises = [];

array.forEach(function(element) {
    promises.push(
        developer.getResources(element)
            .then((data) = > {
                name = data.items[0];
                return developer.getResourceContent(element, file);
            })
            .then((response) = > {
                fileContent = atob(response.content);
                self.files.push({
                    fileName: fileName,
                    fileType: fileType,
                    content: fileContent
                });
            }).catch ((error) = > {
                console.log('Error: ', error);
            })
    );
});

Promise.all(promises).then(() => 
    self.resultingFunction(self.files)
);

This starts the AJAX call for each of the items, adds the result of each call to self.files once the call is complete and calls self.resultingFunction() after all calls have been completed.

Edit: Simplified based on Yury Tarabanko's suggestions.

这篇关于如何在forEach循环中使用promise来填充对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！