首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >工厂中的AngularJS $http请求

工厂中的AngularJS $http请求
EN

Stack Overflow用户
提问于 2015-02-23 18:20:41
回答 2查看 1.8K关注 0票数 1

我希望将JSON文件加载到工厂中,然后返回它的值。

下面是代码:

代码语言:javascript
代码运行次数:0
运行
复制
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的值。

之后我做了个小测试:

代码语言:javascript
代码运行次数:0
运行
复制
    $http.get('guild/guilds.json').success(function(data) {
        obj.content = data;
    });

    console.log(obj)
    return obj;
}

它返回JSON数组中的这个对象:{content:null}。

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

代码语言:javascript
代码运行次数:0
运行
复制
$http.get('guild/guilds.json').success(function(data) {
     obj.content = data;
     console.log(obj)
});

你猜怎么着,它注销了JSON文件。有人能帮我吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-23 18:24:14

$http.get异步执行get。在源代码中的成功块之后出现的代码在成功块中的代码之前运行。因此,它的表现与预期如出一辙:在您的第一次尝试中,您将记录一个未完成请求的结果。

票数 3
EN

Stack Overflow用户

发布于 2015-02-23 18:33:21

这是因为$http.get异步执行get。因此,在您指定值的时候,它还没有可用。您需要在成功函数中返回obj,这样修改代码应该可以使其工作:

代码语言:javascript
代码运行次数:0
运行
复制
// 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);
       }
    }
}

然后,在控制器中调用该数据服务:

代码语言:javascript
代码运行次数:0
运行
复制
dataservice.getGuilds()
  .then(function(data) {
    vm.guilds = data;
    return vm.guilds;
  });

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28680604

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档