$ http然後方法不設置數組

Question

我已經在service.js文件中創建一個服務，我使用$ http來獲取帖子列表。這裏是service.js的代碼。

app.service('PostService', function ($http, $log) { 
var post =[]; 
var err = ""; 

$http({ 
     method : 'GET', 
     url : 'http://myblog.local/wp-json/wp/v2/posts' 
    }) 
    .then(function(response){ 
     post = response.data; 
    }, function(reason){ 
     err = reason.data.message; 
    }); 

this.getPost = function() { 
    return post; 
}; 
this.getError = function() { 
    return err; 
};}); 

在這裏，這是我的控制器，我現在用的服務：

app.controller('BlogController', function($scope, $log, PostService){ 
    $scope.postModel = PostService.getPost(); 
    $scope.errorMessage = PostService.getError(); 
}); 

每次當我打電話的getPost和getError方法，它給了我什麼。雖然$ http成功從url獲取響應。爲什麼然後方法不設置變量post和err。

Answer 1

您正在使用調用服務器的不正確模式。 Http調用是異步操作，所以在運行時需要一些時間來執行代碼。getPost（）是一個簡單的函數，它在您調用它之後即使值仍爲空也會返回值。所以你需要在這裏做的是返回Http調用，並在它返回值之後將其分配給需要的模型。

app.service('PostService', function ($http, $log) { 
var post =[]; 
var err = ""; 


this.getPost = function() { 
    return $http({ 
     method : 'GET', 
     url : 'http://myblog.local/wp-json/wp/v2/posts' 
    }) 
    .then(function(response){ 
     return response.data; 
    }, function(error){ 
     return error; 
    }); 
}; 

}); 


app.controller('BlogController', function($scope, $log, PostService){ 
    PostService.getPost().then(function(post){ 
     // here you can put logic to check is post an data or error 
     $scope.postModel = post; 
    }); 
});