在AngularJS中，是否可以在ui.router的resolve函数中使用$http发起GET请求？

Question

在AngularJS中，是否可以在ui.router的resolve函数中使用$http发起GET请求？

8

我有以下代码（如下），它们对我来说完美地起作用，至少满足了我的需求。但是我有点怀疑这个方法是否太好了。由于我正在努力应对$http的异步行为，此方法在控制器中全局使用响应对象对我帮助很大。

我只是想知道这是否是正确的方式或至少是可接受的方式，或者我应该像AngularJS文档中的传统$http get请求一样，在项目中继续前进。答案会对我有很大帮助。谢谢。 $stateProvider

$stateProvider
    .state('test', {
        url: '/test',
        templateUrl: 'partial.template.html',
        resolve : {
            foo : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
            bar : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
        },
        controller: 'mainController',
    })

控制器

.controller('mainController',['$scope', 'foo', 'bar', function($scope, foo, bar){
    $scope.fooObj = foo;
    $scope.barObj = bar;
}])

- jofftiquez

2

在我看来很好。这就是“resolve”所用的。你有什么疑虑？ - Thomas

这在路由器文档中甚至有例子。 - charlietfl

@Thomas 我在想也许这不是最好的方式，我不想花时间投资于这种方法，然后在未来可能会导致我的世界崩溃（哈哈）。如果你说没问题，那我相信你。谢谢伙计。 :) - jofftiquez

@charlietfl 是这样吗？谢谢，伙计。 :) - jofftiquez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Okazari · Accepted Answer

我认为这可能是ui-router解决方案的最佳应用情景。

无论如何，我更喜欢将我的http调用封装到服务中，并在解决方案中调用该服务，而不是直接使用$http。

代码示例如下：

app.service('FooService',function($http){
  var service={}; 
  service.getFoo = function(){
      return $http({
                method: 'GET',
                url: '/api/something'
             });
  }
  return service;
});

感谢这个方法，您可以在整个应用程序中调用它（同时将其集中化）。

在控制器中：

app.controller('MyController', function($scope, FooService) {
    $scope.controllerName = "MyController";
    FooService.getFoo().success(function(foo){
        $scope.foo = foo
    });
});

在解决中：

$stateProvider
.state('test', {
    url: '/test',
    templateUrl: 'partial.template.html',
    resolve : {
        foo : function(FooService) {
            return FooService.getFoo();
        },
    },
    controller: 'MyController',
})

继续沿用这种方法，你走在了正确的道路上。

希望它有所帮助。

编辑：建立了一个plunker，以添加这些方法的具体示例。