无法使用Angular进行简单的API调用

时间:2016-06-06 01:09:17

标签: javascript angularjs

为什么当我尝试使用这个简单的API调用检索数据时,我收到的错误是http://127.0.0.1:8080/%7B%7Buser.avatar%7D%7D< - ?但是,如果我将我的诺言转移到我的控制器中,它就会起我认为你可以在你的服务中兑现你的承诺,它会正常工作吗?

这是我的controller.js文件

angular.module('userProfiles').controller('MainController', function($scope, mainService) {

  $scope.getUsers = function() {
    mainService.getUsers();
  }
  $scope.getUsers();

});

这是我的services.js文件

angular.module('userProfiles').service('mainService', function($http) {
    var baseUrl = 'http://reqres.in/api/users?page=1';

  this.getUsers = function() {
    return $http({
      method: 'GET',
      url: baseUrl
    }).then(function(response) {
      this.users = response.data.data;
    });
  }
});

1 个答案:

答案 0 :(得分:2)

您没有将users分配给该回调之外的任何可用内容。请尝试这样做,返回一个使用this.getUsers = function() { return $http.get('http://reqres.in/api/users', { params: {page: 1} }).then(function(res) { return res.data.data; }); }; 数据解析的承诺...

$scope.getUsers = function() {
    mainService.getUsers().then(function(users) {
        $scope.users = users;
    });
};

并在您的控制器中

display: inline