如何等待所有数据成功回调的多个 Promise答案

【问题标题】：How to Wait for Multiple Promises for All Data Success Callbacks如何等待所有数据成功回调的多个 Promise
【发布时间】：2016-07-29 13:08:15
【问题描述】：

我有这个 API 调用，但我在我的successCallback 中没有按照我发送它的顺序接收数据。

    for (var i = 0; i < data.length; i++) {
      $http.post('/api/bla/blabla', $.param(data[i]))
        .then(successCallback, errorCallback);
     }

    var successCallback = function (response) {
       /*
       receive data in random order.
       assume its being send / handled so fast, thats its random
       which gets done first.
       */
    };

我能否以某种方式等待接收所有数据，然后将其重新排序为原始顺序？还是有其他解决方案。

【问题讨论】：

你可以这样做，但是在一个请求中发送所有数据会非常非常容易。
看到这个问题stackoverflow.com/questions/21310964/angularjs-q-all你可以使用 $q.all 在你的所有承诺都得到解决后执行代码
我正在使用的后端不支持：/需要一次接收一个。
它仍然会一次接收一个，只是所有请求结束后都会调用回调

标签： angularjs angular-promise

【解决方案1】：

正如 Groben 所说，您可以为每个请求创建一个 Promise 数组，然后您可以使用“when”回调在所有请求完成时执行。

【讨论】：

您介意在我的具体情况下以一个更可取的示例输入这个吗？真的很有帮助。
上面@georgeawg 的回答正是我的建议。而不是“何时”，他使用“那么”，这可能更正确

【解决方案2】：

使用$q.all 以正确的顺序获取所有数据。

var promiseArray = [];
for (var i = 0; i < data.length; i++) {
    var dataPromise = $http.post('/api/bla/blabla', $httpParamSerializer(data[i]))
        .then (function (response) {
             //return data for chaining
             return response.data;
        })
    ;
    promiseArray.push(dataPromise);
}

$q.all(promiseArray).then(function (dataArray) {
     //dataArray will be in original order
     //process results here
}).catch (function (errorResponse) {
     //log error
});

promiseArray 将以正确的顺序创建。即使单个 XHR POST 请求可能未按原始顺序提供服务，$q 服务也会跟踪承诺并以正确的顺序填充数据数组（或解决第一个错误时被拒绝的问题）。

DEMO on JSFiddle。

【讨论】：

您确定dataArray 的顺序相同吗？当然它会按照服务器响应请求的顺序进行，但不能保证与发送请求的顺序相同。
promiseArray 会立即以正确的顺序创建。即使各个承诺可能以不同的顺序完成，它们在promiseArray 中的位置保持不变。 $q.all 等待所有个人承诺的履行。 dataArray 的解析顺序与 promiseArray 相同。

【解决方案3】：

$http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback); 你可以试试这些请注意，响应对象具有以下属性：

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

这些也可以根据您使用的 API 工作...

【讨论】：