Question

我在使用我的应用程序中解决问题机制时遇到了问题。

我将webservice调用分成一个额外的模块，并使用deferred / promise进行回调。

在显示状态＆＃34; workflowdefinitions.detail＆＃34;之前，应用程序应使用$ stateParams的workflowDefinitionId加载工作流定义并调用函数＆＃34; getWorkflowDefinition＆＃34;服务模块中的workflowDefinitionService。

我试过了我在这里读过的很多东西，但是不能让它运转起来。如何处理返回的promise以将返回数据传递给resolve？

定义的workflowDefinition

这可以与我的服务一起使用，还是我必须以不同的方式定义服务？

app.js

var atpApp = angular.module('atpApp', [ 'ui.router', 'workflowServices', 'workflowControllers' ]);

    atpApp.config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider , $locationProvider) {

        $urlRouterProvider.otherwise('/workflowdefinitions');

        $stateProvider.state('workflowdefinitions', {
            url : '/workflowdefinitions',
            controller : 'WorkflowDefinitionListCtrl',
            templateUrl : 'partials/workflowdefinition-list.html'
        })

        .state('workflowdefinitions.detail', {
            url : '/:workflowDefinitionId',
            views : {
                '@' : {
                    templateUrl : 'partials/workflowdefinition-detail.html',
                    controller : 'WorkflowDefinitionDetailCtrl',
                    resolve: {
                        workflowDefinition: function($stateParams, workflowDefinitionService) {                 
                            return workflowDefinitionService.getWorkflowDefinition($stateParams.workflowDefinitionId);
                        }
                    }
                }
            }
        });
    } ]);

    atpApp.run([ '$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    } ]);

服务模块（workflowSevices.js）

var workflowServices = angular.module('workflowServices', []);

workflowServices.service('workflowDefinitionService', function($http, $q) {

    var config = {headers:  {
        'Accept': 'application/json'
        }
    };

    this.getWorkflowDefinitions = function(){
        var deferred = $q.defer();
        $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows', config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });

        return deferred.promise;
    };

    this.getWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId, config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

    this.activateWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.post('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId+"/activate", config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

    this.deactivateWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.post('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId+"/suspend", config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };
});

Answer 1

这个概念应该有效。有一个plunker，它应该与您在上面尝试的几乎相同。没有变化，原样。 （如上面的代码所示）

唯一的变化 - 例如目的 - 是服务方法getWorkflowDefinition，它因$timeout服务而延迟，但随后返回传递的参数

this.getWorkflowDefinition = function(param){
    var deferred = $q.defer();
    $timeout(function(){
      deferred.resolve(param);
    }, 750) 
    return deferred.promise;
};

所以，你的概念，设计正在运作，请点击此处查看：plunker

Answer 2

此外，您无需在任何地方延迟/解决锅炉板。

此代码

var deferred = $q.defer();
$http.post( 'http://localhost:8080/vms-atp-webapp/services/rest/workflows/' + workflowDefinitionId +"/suspend", config).
success(function(data, status) {
   deferred.resolve(data);
}).error(function(data, status) {
   deferred.reject(data);
});
return deferred.promise;

可以简化为简单

return $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows', config);

这是因为$ http.get返回一个承诺，当成功和错误时，内部解析/拒绝承诺。

Angular ui-router通过resolve和promise / deferred获取异步数据

2 个答案: