angularjs – 来自多个承诺的增量UI更新

发布时间：2020-12-17 07:37:49 所属栏目：安全来源：网络整理

导读：我有一个AngularJS服务,用于根据索引(/ contacts)检索单个联系人(/ contacts /：id)： app.service("CollectionService",function($http,$q) { this.fetch = function(collectionURL) { return $http.get(collectionURL).then(function(response) { var urls

我有一个AngularJS服务,用于根据索引(/ contacts)检索单个联系人(/ contacts /：id)：

app.service("CollectionService",function($http,$q) {
    this.fetch = function(collectionURL) {
        return $http.get(collectionURL).then(function(response) {
            var urls = response.data;
            var entities = urls.map(function(url) {
                return $http.get(url);
            });
            return $q.all(entities);
        }).then(function(responses) {
            return responses.map(function(response) {
                return response.data;
            });
        });
    };
});

// used within the controller:
CollectionService.fetch("/contacts").then(function(contacts) {
    $scope.contacts = contacts;
});

结果以简单的列表(< li ng-repeat =“contact in contacts”> {{contact}}< / li>)显示.

但是,由于使用$q.all,该列表在接收到最后(最慢)的响应之前不会被更新.当接收到个人联系人时,如何从此批量更新切换到增量更新？

您可以使用自己的承诺返回,然后挂接到承诺的通知,以提供整体加载进度的更新,并仍然使用$q.all来确定何时完成.它基本上是你现在有了稍微不同的处理方式和使用自定义承诺.

小提琴：http://jsfiddle.net/U4XPU/1/

HTML

<div class="wrapper" ng-app="stackExample">
    <div class="loading" ng-show="loading">Loading</div>
    <div class="contacts" ng-controller="ContactController">
        <div class="contact" ng-repeat="contact in contacts">    {{contact.name}} - {{contact.dob}}</div>
    </div>
</div>

调节器

.controller("ContactController",["$scope","CollectionService",function (scope,service) {
    scope.contacts = [];
    scope.loading = true;

    service.fetch("/contacts")
        .then(
    // All complete handler
    function () {
        console.log("Loaded all contacts");
        scope.loading = false;
    },// Error handler
    function () {
        scope.error = "Ruh roh";
        scope.loading = false;
    },// Incremental handler with .notify
    function (newContacts) {
        console.log("New contacts found");
        scope.contacts = scope.contacts.concat(newContacts);
    });
}])

服务

.service("CollectionService",["$q","$http",function (q,http) {

    this.fetch = function (collectionUrl) {

        var deferred = q.defer();

        http.get(collectionUrl)
        .then(function (response) {

            // Still map all your responses to an array of requests
            var allRequests = response.data.map(function (url) {
                return http.get(url)
                    .then(function (innerResponse) {
                        deferred.notify(innerResponse.data);
                    });
            });

            // I haven't here,but you could still pass all of your data to resolve().
            q.all(allRequests).then(function () {
                deferred.resolve();
            });

        });

        return deferred.promise;

    }

}]);

您也可以按照您的看法和.reject()的承诺来处理错误：

http://docs.angularjs.org/api/ng/service/$q

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!