javascript - Angular foreach 等待 http 调用的问题

Question

我正在构建一个 ionic 项目，用户可以在其中进行游览(数据来自 API)

每个旅程都有一定数量的部分，用户可以在 map 上的某个点玩。该应用程序必须能够是100%离线的应用程序，因此当用户输入旅游的代码时，必须从API检索数据，然后用户才能继续(因此该应用程序会将旅游的所有数据置于离线状态) )。每个部分都有图像、视频、音频，在应用程序启动时下载。

问题是正在下载所有数据的函数调用不同步。 console.log 表明该函数在下载所有数据之前已经结束。部分代码如下:

     function getAndFillFullTour() {
    vm.showLoader = true;
    // load data
    TourFactory.getFullTour(vm.tourData.number, function(data){
      if(data.state == 'success'){
        vm.tourData = data;
        var test = downloadData(function(){
          // hide loader and continue tour
        });
      } else {
        console.log('error');
      }
    });
  }

此函数调用正在获取完整浏览的工厂，其中包括下载到用户设备上所需的每个部件的图像路径。 downloadData函数是以下函数:

function downloadData(callback) {
    angular.forEach(vm.tourData.parts, function(value, key){
      var part = value;
      var i = key;

      if(part.image !== "") {
        TourFactory.getPartImage(part, tourId, function(data){
          vm.tourData.parts[i].partImage = data;
          console.log('executed with picture ' + i);
        });
      }

    });

    if(callback)
        callback();
  }

不幸的是，forloop 本身是同步执行的，但它并不等待工厂调用完成。我尝试了很多有 promise 的替代方案，但没有运气。有人可以帮忙吗？我需要等待 http 调用完成才能从 downloadData 调用中获取响应。

getPartImage() 只是一个示例，有五个这样的函数，每个 for 循环都需要先完成，然后才能在 downloadData 调用中获得响应。

Answer 1

看看$q.all或here - 它是一个 Promise 辅助函数，可以等待多个 Promise 完成。它的结果也是一个 promise ，因此您可以将其与其他 promise 链接起来。

// Promise function that knows how to download a single part
function downloadPart(myurl) {
  // return http promise
  return $http({
    method: 'GET',
    url: myurl
  });
};

// Aggregat epromise that downloads all parts
function downloadAllParts(parts) {
  var defer = $q.defer(); // Setup return promise
  var partsPromises = []; // Setup array for indivudual part promises
  angular.forEach(parts, function(part) { // Iterate through each part
    // Schedule download of a single
    partsPromises.push(downloadPart(part));
  });
  // Wait for all parts to resolve
  $q.all(partsPromises)
    .then(function(data) {
      // Returned data will be an array of results from each individual http promise
      resData = [];
      angular.forEach(data, function(partData) {
        //handle each return part
        resData.push(partData.data);
      })
      defer.resolve(resData); // Notify client we downloaded all parts
    }, function error(response) { // Handle possible errors
      console.log('Error while downloading parts'
        response);
      defer.reject('Error while downloading parts');
    });
  return defer.promise;
};

然后，在您的客户端中，您只需等待 downloadAllParts 完成即可:

downloadAllParts(myParts)
 .then(function(data) {
   alert('Success!');
 }, function(error) {
   alert(error);
 })

由于 $q.all 也是一个 promise ，因此您可以一起摆脱延迟:

// Aggregat epromise that downloads all parts
function downloadAllParts(parts) {
  var partsPromises = []; // Setup array for indivudual part promises
  angular.forEach(parts, function(part) { // Iterate through each part
    // Schedule download of a single
    partsPromises.push(downloadPart(part));
  });
  // Wait for all parts to resolve
  return $q.all(partsPromises)
    .then(function(data) {
      // Returned data will be an array of results from each individual http promise
      var resData = [];
      angular.forEach(data, function(partData) {
        //handle each return part
        resData.push(partData.data);
      })
      return resData;
    });
};

这是一个工作中的jsfiddle:link