AngularJS 工厂中的 $http 请求

Question

我想将 JSON 文件加载到工厂中，然后 return 它的值。

代码如下：

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;
}

问题是它只 returns 值为 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 文件。有人愿意帮助我吗？

Answer 1

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

Answer 2

这是因为 $http.get 以异步方式执行获取。所以在你分配价值的时候，它还不可用。您需要 return success 函数中的 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;
  });

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

AngularJS 工厂中的 $http 请求

AngularJS $http request in a factory

javascript

json

factory

angularjs