Question

在我的$ routeProvider中，我有一个resolve属性，用于在实例化我的控制器之前从API获取数据。为什么当我使用带有$ http服务的$ q时，我可以将数据传递给我的控制器。他们都做同样的事吗？

这是我原来的方法，数据无法传递给控制器：

AccountService.js

app.factory('AccountService', ['$http', '$q', function ($http, $q) {
    return {
        GetAccounts: function () {
            return $http.get('api/Account/GetAccounts')
            .then(function success(response) {
                return response;
            }, function error(response) {
                ̶r̶e̶t̶u̶r̶n̶ throw console.log("Oops!");
            });
        },
    };
}]);

要将数据传递到控制器，我将GetAccounts更改为：

app.factory('AccountService', ['$http', '$q', function ($http, $q) {
    return {
        GetAccounts: function () {
            var deferred = $q.defer();
            $http.get('api/Account/GetAccounts')
            .then(function (data) {
                deferred.resolve(data.data);
            })
            .catch(function (response) {
                deferred.reject(response);
            })

            return deferred.promise;
        },
    };
}]);

route.js

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/users', {
        template: '<admin accounts="$resolve.accounts"></admin>',
        resolve: {
            accounts: function (AccountService) {
                return AccountService.GetAccounts()
                    .then(function (data) {
                        return data;
                    })
            }
        }
    })
}]);

Answer 1

$ q是承诺的Angulars包装器。 $ http直接返回一个promise，所以无论你是直接使用新的$ q还是$ http创建一个新的promise，它们都是相同的

Answer 2

所以基本上你不必在AccountService中做你所做的事情，只需要这样做：

app.factory('AccountService', ['$http', function ($http) {
    return {
        GetAccounts: function () {

            return $http.get('api/Account/GetAccounts')
            .then(function (data) {
                return data.data;
            })
        },
    };
}]);

我会保存.catch（）以便您处理并可能将错误包装在一个漂亮的错误构造中，除非你的后端已经这样做了。

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/users', {
        template: '<admin accounts="$resolve.accounts"></admin>',
        resolve: {
            accounts: function (AccountService) {
                return AccountService.GetAccounts()
                    .catch( function(err) { ̶r̶e̶t̶u̶r̶n̶ throw new BusinessError( err ) } )
            }
        }
    })
}]);

或让调用控制器/组件处理它，这是架构决策。

使用$ q和$ http

2 个答案: