javascript - 在 Angular JS 中使用工厂和 http

Question

我刚刚开始使用 Angular，看到您可以定义一个工厂以在多个 Controller 中使用。

我有下面的代码，它在“成功”方法中返回了我的结果。但不在函数之外。

我觉得它与异步有关，但如果确实如此，我不太确定如何推进它。

如有任何帮助，我们将不胜感激，在此先致谢。

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

abyssApp.factory('abyssData', function($http) {
    var result,
        products = $http.get('http://abyss.local/products.php');

    products.success(function(data) {
        result = angular.fromJson(data);
        console.log('success: ', result);  // object with data in
    });

    console.log(result);  // undefined
});

abyssApp.controller('ItemListCtrl', function($scope, abyssData) {
    $scope.items = abyssData;
    console.log('abyssData: ', abyssData);  // undefined
});

Answer 1

这里是一些编辑。请注意，我这样做并没有真正检查，所以打字和错误是完全可能的，但它的要点应该是有道理的。

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

abyssApp.service('abyssData', function($http) {
    this.products = $http.get('http://abyss.local/products.php');
});

abyssApp.controller('ItemListCtrl', function($scope, abyssData) {
    abyssData.products.then(function(data) {
        console.log(data);
        $scope.items = data;
    }).catch(function(err){console.log(err);});
});

我把它变成了一个服务而不是一个工厂，因为你真的只需要一个服务(单例)。如果您要调用不同的 URL，并且想要执行诸如 product = new abyssData('potatoes') 之类的操作，那么工厂将是合适的。

一般来说，$http返回一个promise对象，它本身并不是你需要的数据，而是resolve你需要的数据。这种 promise 模式在 Angular 上重复了很多(并且在其他 javascript 场所越来越流行，因为它很棒(IMO))。这意味着，在 promise 对象上，您调用 .then() 方法并传入一个函数以在 promise 被解决时调用。 $http 解析为 XHR 的结果。其他 promise 与其他事情一起解决。

在 promise .then 堆栈的末尾，调用 .catch() 是一种很好的形式，因为在 promise 中抛出的异常通常会进入 bitbucket，除非您明确查找它们。这是 promises 工作方式的一个普遍缺陷，意味着您必须小心异常。对于较旧的 JS 引擎，您需要将其更改为 .then()'catch'，因为 catch 在某些地方是一个有趣的词。但我有 90% 的把握，任何在 .catch 上阻塞的 JS 环境无论如何都不会运行 Angular。