javascript - Angular Chain 许多请求

Question

我正在尝试构建一项服务，该服务可以获取 CSV 数据，将其转换为行，然后针对每行/从每一行发出 API 请求，将格式化结果添加到输出字符串。

换句话说，我的 (Coffeescript) 代码如下所示:

  $s.batchFetch = ->
    return unless $s.csv
    $s.output = ''
    for row in $s.csv.split("\n")
      $s._addToOutput(row)

$s._addToOutput() 函数使用该行正确地进行 API 调用，格式化它，并将格式化的响应添加到我的输出字符串($s.output).基本上是这样的:

$s._addToOutput (row) = -> 
  formattedResponse = ''
  $http.get("api/request/path/row-specific-whatever")
    .success (res) ->
      formattedResponse = $s._format(res)
    .then ->
      $s.output += formattedResponse

问题 是我的输出字符串中格式化响应的顺序似乎是随机/可变的。看起来 API 对于某些行比其他行花费的时间更快/更长，并且首先返回的响应首先被添加——不考虑我的 rows 变量的顺序。

我认为解决方案是某种 Angular promise 链，la:

$s._addToOutput(row).then ->
  $s._addToOutput(secondRow).then ->
    $s._addToOutput(thirdRow).then ->
      ...

但我有不可预测的行数，我很想能够基本上只是说:“为每一行进行 API 调用，一个接一个地。”

谁能想到一个好的方法来做到这一点？我现在可能没有想清楚，但我被难住了。

谢谢!

萨沙

编辑 -- 试了一下 ryeballar 的解决方案，但我的实现并没有真正解决重新排序问题。很确定这是我的错误，所以如果有人发现任何问题，请告诉我:

(请注意，我不得不调整解决方案，因为我对每一行连续发出了两次请求——第一个是“ field ”，第二个是我找到的 field 的“照片”。此外， yamlify == '格式'。)

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $scope.csv.split("\n").reduce(function(promise, row) {
    var rowPromise, split;
    split = row.split(',');
    rowPromise = $s._getVenue(split[0], split[1]).success(function(res) {
      var venue;
      venue = res.response.groups[0].items[0].venue;
      $s._getPhoto(venue).success(function(resp) {
        var photo;
        photo = $s._photoUrl(resp);
        return $s.output += $s._yamlify(venue, row, photo);
      });
    });
    return promise.then(rowPromise);
  }, $q.when());
};

注意 -- getVenue() 和 getPhoto() 只是对 $http 的调用，因此它们返回响应 的对象>success, error, then 等。 photoUrl() 只是一个辅助函数，用于将响应对象解析为新的API 路径。

最新成果，仍在随机重新排序 -- 是的 _getVenue 和 _getPhoto 只是 $http.get(path) 调用:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    var rowPromise, split;
    split = row.split(',');
    rowPromise = $s._getVenue(split[0], split[1]).success(function(res) {
      var venue;
      venue = res.response.groups[0].items[0].venue;
      return $s._getPhoto(venue).success(function(resp) {
        var photo;
        photo = $s._photoUrl(resp);
        return $s.output += $s._yamlify(venue, row, photo);
      });
    });
    return promise.then(rowPromise);
  }, $q.when());
};

Answer 1

您可以通过从一个 promise 调用到下一个 promise 来使用 .reduce()。初始值是一个 promise ，它将立即解析 $q.when() 然后调用 rowPromise 这也是一个 promise ，每当每个 then() 被调用。

.controller('CsvController', function($scope, $q) {

  $scope.csv = '.....';
  $scope._format = function() {/*...*/};

  $scope.batchFetch = function() {
    $scope.output = '';
    return $scope.csv.split('\n').reduce(function(promise, row) {
       return promise.then(function() {
          return $http.get("api/request/path/row-specific-whatever", {row: row})
                          .success(function(res) {
                             $scope.output += $scope._format(res);
                          });
       });
    }, $q.when());
  };

});

更新:我已经更新了上面的代码，它应该是一个回调而不是在迭代过程中调用$http请求。所以你的代码应该是这样的:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    return promise.then(function() {
       var split = row.split(',');
       return $s._getVenue(split[0], split[1]).success(function(res) {
         var venue = res.response.groups[0].items[0].venue;
         return $s._getPhoto(venue).success(function(resp) {
           var photo = $s._photoUrl(resp);
           return $s.output += $s._yamlify(venue, row, photo);
         });
       });
    });
  }, $q.when());
};

当我通读您的代码时，它似乎陷入了回调 hell 。或者，最好像这样构造它:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    var split, venue, photo;
    return promise
       .then(function() {
          split = row.split(',');
          return $s._getVenue(split[0], split[1]);
       }).then(function(response) {
          venue = response.data.response.groups[0].items[0].venue;
          return $s._getPhoto(venue);
       }).then(function(response) {
          photo = $s._photoUrl(response.data);
          return $s.output += $s._yamlify(venue, row, photo);
       });
  }, $q.when());
};