如何使用reduce和promises等待数组中每个元素的AsyncRequests [英] How to wait for AsyncRequests for each element from an array using reduce and promises

问题描述

我是 AngularJS 和 JavaScript 的新手.

I'm new on AngularJS and JavaScript.

我正在获取数组(汽车)的每个元素的远程信息并创建一个新数组(感兴趣的潜在客户).所以我需要同步请求.我需要按照汽车的相同顺序将每个请求的响应添加到新数组中.

I am getting remote information for each of the elements of an array (cars) and creating a new array (interested prospects). So I need to sync the requests. I need the responses of each request to be added in the new array in the same order of the cars.

我首先使用 for:

for (a in cars) {
    //async request
    .then(function () {
        //update the new array
    });
}

这会发出所有请求，但自然不会更新新数组.

This make all the requests but naturally didn't update the new array.

在论坛中寻找后，我发现了这个很好的例子和解释，用于返回一个中间承诺并同步所有这些.

After seeking in forums, I found this great examples and explanations for returning a intermediate promise and sync all of them.

1. http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
 2. http://stackoverflow.com/questions/25605215/return-a-promise-from-inside-a-for-loop 
 3. http://www.html5rocks.com/en/tutorials/es6/promises/

(@MaurizioIndenmark、@Mark Rajcok、@Michelle Tilley、@Nolan Lawson)

(@MaurizioIndenmark, @Mark Rajcok , @Michelle Tilley, @Nolan Lawson)

我无法使用第二个参考中建议的 Promise.resolve().所以我使用了 $q.defer() 和 resolve().我想我必须注入依赖项或其他我错过的东西.如下图:

I couldn't use the Promise.resolve() suggested in the second reference. So I had used $q.defer() and resolve(). I guess I have to inject a dependency or something else that I missed. As shown below:

在控制器中我有:

$scope.interestedProspects = [] ;

RequestDetailsOfAsync = function ($scope) {
    var deferred = $q.defer();
    var id = carLists.map(function (car) {
        return car.id;
    }).reduce(function (previousValue, currentValue) {
        return previousValue.then(function () {
            TheService.AsyncRequest(currentValue).then(function (rData) {
                $scope.interestedProspects.push(rData);
            });
        });
    }, deferred.resolve());
};

在服务中我有类似的东西:

In the Service I have something like:

angular.module('app', []).factory('TheService', function ($http) {
    return {
        AsyncRequest = function (keyID) {
            var deferred = $q.defer();
            var promise = authorized.get("somep.provider.api/theService.json?" + keyID).done(function (data) {
                deferred.resolve(data);
            }).fail(function (err) {
                deferred.reject(err);
            });
            return deferred.promise;
        }
    }
}

我得到的显示错误:Uncaught TypeError: previousValue.then is not a function

我做了一个 jsfiddle 重用其他可用的，这样可以更容易地解决这个问题 http://jsfiddle.net/alisatest/pf31g36y/3/.如何使用reduce和promises等待数组中每个元素的AsyncRequests

I made a jsfiddle reusing others available, so that it could be easier to solve this http://jsfiddle.net/alisatest/pf31g36y/3/. How to wait for AsyncRequests for each element from an array using reduce and promises

不知道是不是错误:

• 在控制器函数中放置解析的位置.
• reduce 函数的使用方式

previousValue 和 currentValue 有时会被 javascript 看到，就像最初的 Promise 类型，然后是一个数字.在 jsfiddle 中，我有一个使用 reduce 的工作示例和示例的 http 请求.

The previousValue and currentValue sometimes are seen by javascript like type of Promise initially and then as a number. In the jsfiddle I have a working example of the use of the reduce and an http request for the example.

推荐答案

看看这个模式你想做什么:

Look at this pattern for what you want to do:

        cars.reduce(function(promise, car) {
            return promise.then(function(){
              return TheService.AsyncRequest(car).then(function (rData) {
                $scope.details.push(rData);
              });
            });
        }, $q.when());

这将完全按照它们在汽车数组中的顺序对每辆车执行所有异步调用.如果异步调用的顺序无关紧要，$q.all 也可能就足够了.

This will do all the asynchronous calls for every car exactly in the sequence they are in the cars array. $q.all may also be sufficient if the order the async calls are made doesn't matter.

这篇关于如何使用reduce和promises等待数组中每个元素的AsyncRequests的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！