angularjs，写service 控制器打印出来是undefined？

Question

angularjs 用服务获取json数据，在控制器调用，打印为undefined。页面不显示值。

这是controller 代码：

'use strict';
app.controller('WrapCtrl',['$scope','myService',function($scope,myService,){
myService.getData().then(function(data){
    console.log(data.wel_title) 
    
},function(error){
    $scope.error=error
})
}]);

这是service代码：

'use strict';
app.service("myService",['$http','$q',function myService($http,$q){
return{
    getData:function(){
        var d=$q.defer()
        return $http.get("json/welcome.json")
        Promise.then(function(data){
             //在这里可以对返回的数据集做一定的处理,再交由controller进行处理
            data.status=true;
            d.resolve(data);
        },
        function(error){
            error.status=false;
            d.reject(error)
        })
        return d.promise;
    }
}
    
}])；

json文件：

{"wel_title":"欢迎来到Angular世界"}

报错信息

求老司机指点一二。

Answer 1

app.service('MyService' ,[
    '$http' ,
    function ($http){
        /**
         * 获取数据
         */
        this.getData = function (){
            // $http返回的已经是$q的Promise,不用再封装一层了
            return $http.get('json/welcome.json').then(function (response){
                return response.data;
            });
        };
        return this;
    } ,
]);

关于你的代码,划红线的地方已经return了,下面的代码不会执行,而$http返回的Promise里面包含的是response,不直接是data,所以你的打印是undefined,你可以改成response.data.wel_title.

Answer 2

Promise.then 那里有点儿没看懂。。。这个大写的 Promise 是啥？另外，$http.get 本身就返回一个 promise。
而且，你的代码中有两个 return。因此，后面的 return d.promise 是根本就执行不到的。
结果就是，你定义的这个 function 根本就没返回 promise。

你可以改成这样试试：

getData:function(){
    var d=$q.defer();
    return $http.get("json/welcome.json")
        .then(function(data){
            data.status=true;
            d.resolve(data);
            return d.promise;
        },
        function(error){
            error.status=false;
            d.reject(error)
            return d.promise;
        });
}

原理就是先在这里用 .then 解析一下，解析之后加上你想改的东西，然后重新返回一个新的 promise。controller 里调用的时候，用 .then 去解析这个新的 promsie