Angular JS:按顺序处理承诺(不带链接)

时间:2022-05-15 11:41:40

This is similar to question 17757654, but without chaining.

这类似于问题17757654,但没有链接。

Background:
I have a very chatty API which brings back some JSON every key press, and sometimes these requests come back in the wrong order (with very fast key presses). Chaining promises seems like a reasonable solution, but I was wondering if there is a nice way to solve this without chaining? (and without knowing any details about the request/message)

背景:我有一个非常健谈的API,它会在每次按键时返回一些JSON,有时这些请求会以错误的顺序返回(按下非常快的按键)。链接承诺似乎是一个合理的解决方案,但我想知道是否有一个很好的方法来解决这个没有链接? (并且不知道有关请求/消息的任何细节)

I've written an example using timeouts here: http://jsfiddle.net/zakGh/

我在这里写了一个使用超时的例子:http://jsfiddle.net/zakGh/

and below,

var myModule = angular.module('myModule', []);
myModule.factory('HelloWorld', function ($q, $timeout) {

    var getSlowFirstMessage = function () {
        var deferred = $q.defer();

        $timeout(function () {
            deferred.resolve('Slow First Message');
        }, 2000);

        return deferred.promise;
    };

    var getFastSecondMessage = function () {
        var deferred = $q.defer();

        $timeout(function () {
            deferred.resolve('Fast Second Message');
        }, 1000);

        return deferred.promise;
    };

    return {
        getSlowFirstMessage: getSlowFirstMessage,
        getFastSecondMessage: getFastSecondMessage
    };

});

myModule.controller('HelloCtrl', function ($scope, HelloWorld) {

    $scope.messages = [];

    HelloWorld.getSlowFirstMessage().then(function (message) {
        $scope.messages.push(message);
    });

    HelloWorld.getFastSecondMessage().then(function (message) {
        $scope.messages.push(message);
    });

});

<body ng-app="myModule" ng-controller="HelloCtrl">
     <h1>Messages</h1>

    <ul>
        <li ng-repeat="message in messages">{{message}}</li>
    </ul>
</body>

1 个解决方案

#1


2  

I'd use Queue from the async library found here: https://github.com/caolan/async#queue

我将从这里找到的异步库中使用Queue:https://github.com/caolan/async#queue

If you set the concurrency to 1, it just does it all in series. Check out the example

如果将并发性设置为1,则它只是将所有这些都串联起来。看看这个例子

myModule.controller('HelloCtrl', function ($scope, HelloWorld, $timeout) {

$scope.messages = [];   

var q = async.queue(function (task, callback) {
    task().then(function(message){
        $timeout(function(){
            $scope.messages.push(message); 
            callback();
        });
    });
}, 1);


// assign a callback
q.drain = function() {
    console.log('all items have been processed');
}

// add some items to the queue

q.push(HelloWorld.getSlowFirstMessage, function (err) {
   console.log('finished processing slow');
});
q.push(HelloWorld.getFastSecondMessage, function (err) {
   console.log('finished processing fast');
});

});

Here's the working fiddle: http://jsfiddle.net/zakGh/4/

这是工作小提琴:http://jsfiddle.net/zakGh/4/

#1


2  

I'd use Queue from the async library found here: https://github.com/caolan/async#queue

我将从这里找到的异步库中使用Queue:https://github.com/caolan/async#queue

If you set the concurrency to 1, it just does it all in series. Check out the example

如果将并发性设置为1,则它只是将所有这些都串联起来。看看这个例子

myModule.controller('HelloCtrl', function ($scope, HelloWorld, $timeout) {

$scope.messages = [];   

var q = async.queue(function (task, callback) {
    task().then(function(message){
        $timeout(function(){
            $scope.messages.push(message); 
            callback();
        });
    });
}, 1);


// assign a callback
q.drain = function() {
    console.log('all items have been processed');
}

// add some items to the queue

q.push(HelloWorld.getSlowFirstMessage, function (err) {
   console.log('finished processing slow');
});
q.push(HelloWorld.getFastSecondMessage, function (err) {
   console.log('finished processing fast');
});

});

Here's the working fiddle: http://jsfiddle.net/zakGh/4/

这是工作小提琴:http://jsfiddle.net/zakGh/4/