工厂中的 AngularJS $http 请求答案

【问题标题】：AngularJS $http request in a factory工厂中的 AngularJS $http 请求
【发布时间】：2015-02-23 18:20:41
【问题描述】：

我想将一个 JSON 文件加载到工厂中，然后返回它的值。

代码如下：

angular.module('getGuilds', [])
    .factory('getGuilds', getGuilds);

getGuilds.$inject = ['$http'];

function getGuilds($http){
    var obj = {content:null};

    $http.get('guild/guilds.json').success(function(data) {
        obj.content = data;
    });

    return obj;
}

问题是它只返回值为 null 的对象，所以看起来 $http.get 并没有改变 obj.content的值>.

在这之后我做了一个小测试：

    $http.get('guild/guilds.json').success(function(data) {
        obj.content = data;
    });

    console.log(obj)
    return obj;
}

它返回了这个包含 JSON 数组的对象：{content:null}。

然后我将 console.log 放入 $http.get 请求中。

$http.get('guild/guilds.json').success(function(data) {
     obj.content = data;
     console.log(obj)
});

猜猜看，它注销了 JSON 文件。有人会帮助我吗？

【问题讨论】：

标签： javascript json angularjs factory

【解决方案1】：

$http.get 异步执行 get。源代码中成功块之后出现的代码在成功块中的代码之前运行。所以它的行为与预期一样：在您第一次尝试时，您正在记录未完成请求的结果。

【讨论】：

【解决方案2】：

这是因为 $http.get 异步执行 get。因此，在您分配值时，它还不可用。您需要在成功函数中返回 obj，像这样更改您的代码应该使其工作：

// dataservice factory
angular
 .module('getGuilds', [])
 .factory('dataservice', dataservice);

dataservice.$inject = ['$http'];

function dataservice($http) {
    return {
      getGuilds: getGuilds
    };

    function getGuilds() {
       return $http.get('guild/guilds.json')
        .then(getGuildsComplete)
        .catch(getGuildsFailed);

       function getGuildsComplete(response) {
        return response.data;
       }

       function getGuildsFailed(error) {
         console.log('XHR Failed for getGuilds.' + error.data);
       }
    }
}

然后在您的控制器中调用数据服务：

dataservice.getGuilds()
  .then(function(data) {
    vm.guilds = data;
    return vm.guilds;
  });

显然控制器需要更多代码才能实际工作。但这应该可以为您提供足够的信息来解决您的问题。

【讨论】：