如何在for循環後返回單個promise，其中循環內數組的每個元素都執行多個異步調用

Question

我有一個需要使用不同值進行克隆的對象數組。

在準備主要修改的對象數組後，我會從每個承諾中獲得這些值，我將不得不保存這些值。所以我很多人需要這個作爲一個單一的承諾。

我不知道該怎麼做。

下面是我們需要克隆oldUser數據的示例。說老用戶的信用評分= 100;但對於新用戶，默認信用將由系統隨機創建。

對於用戶陣列中的每個用戶，很少的細節必須使用異步調用進行更新。 這是要求

function getUserCreditScore(user){ 
    var url = '/someurl'; 
    return $http.get(url).then(function(res){ 
    user.creditScore = (res.data) ? res.data : 0; 
    }); 
} 

function getUserRecomandations(user){ 
    var url = '/someurl'; 
    return $http.get(url).then(function(res){ 
    user.recommendation = (res.data) ? res.data : 'basic recommendation'; 
    }); 
} 

function getUserHelpInfo(user){ 
    var url = '/someurl'; 
    return $http.get(url).then(function(res){ 
    user.helpInfo = (res.data) ? res.data : 'Help Info'; 
    }); 
} 


function clone(){ 
    var newUsers = angular.copy(oldUsers); 

    for (var i=0; i<newUsers.length; i++){ 
    newUsers[i].id = undefined; 
    getUserCreditScore(newUsers[i]); 
    getUserRecommendation(newUsers[i]); 
    getUserHelpInfo(newUsers[i]); 
    } 

    var promises = _.map(newUsers, user => user.save()); 
    $q.all(promises).then(function (data) { 
    console.log(data); 
    } 
} 

Answer 1

你需要Promise.all承諾的陣列由getScreditScore

像

function getCreditScore(){ 
    var url = '/someurl'; 
    return $http.get(url).then(res => (res && res.data) ? res.data : res); 
} 

function clone(){ 
    var newUsers = angular.copy(oldUsers); 

    Promise.all(
     newUsers.map(newUser => { 
      newUser.id = undefined; 
      return getCreditScore() 
      .then(result => newUser.creditScore = result); 
     }) 
    ).then(results => // results will be an array of values returned by the get in getCreditScore(newUser) 
     Promise.all(newUsers.map(user => user.save())) 
    ).then(data => 
     console.log(data); // this will be the result of all the user.save 
    ); 
} 

注意返回上：在newUser.creditScore設置在然後在newUsers.map回調 - （對我原來的答案的最小改變）

Alternati vely，傳遞用戶getCreditScore

function getCreditScore(user){ 
    var url = '/someurl'; 
    return $http.get(url) 
    .then(res => (res && res.data) ? res.data : res) 
    .then(score => user.creditScore = score); 
} 

function clone(){ 
    var newUsers = angular.copy(oldUsers); 

    Promise.all(
     newUsers.map(newUser => { 
      newUser.id = undefined; 
      return getCreditScore(newUser); 
     }) 
    ).then(results => // results will be an array of values returned by the get in getCreditScore(newUser) 
     Promise.all(newUsers.map(user => user.save())) 
    ).then(data => 
     console.log(data); // this will be the result of all the user.save 
    ); 
} 

就個人而言，我會寫代碼

function getCreditScore(){ 
    var url = '/someurl'; 
    return $http.get(url).then(res => (res && res.data) ? res.data : res); 
} 

function clone(){ 
    var newUsers = angular.copy(oldUsers); 

    Promise.all(
     newUsers.map(newUser => { 
      newUser.id = undefined; 
      return getCreditScore() 
      .then(result => newUser.creditScore = result) 
      .then(() => newUser.save()) 
      .then(() => newUser); 
     }) 
    ).then(data => 
     console.log(data); // this will be the newUsers Array 
    ); 
} 

這是假設，雖然，你並不需要等待所有的$ HTTP .get在運行user.save()之前 - 事實上，由於newUser.save和$http.get將會一前一後運行，因此可能會有一點（很少）更高性能

Answer 2

好的，我知道你的意思，你希望你的數組中的每一個元素做一些異步的事情。

所以你可以使用map和Promise.all。這裏是我的代碼：

const asyncFunction = (item, cb) => { 
    setTimeout(() => { 
    console.log(`done with ${item}`); 
    cb(); 
    }, 1000); 
} 

let requests = [1, 2, 3].map((item) => { 
    return new Promise((resolve) =>{ 
    asyncFunction(item, resolve); 
    }); 
}); 

Promise.all(requests).then(() => console.log('done'));