Angular JS 使用 $resource 并等待 promise 被解析

Question

我写了这个服务，它使用 $resource 使用 github api

获取用户名

githubApiD3App.service('githubApiService', ['$resource', function($resource){
    this.GetuserNames = function(searchString){
        var githubAPI = $resource("https://api.github.com/search/users", {callback: "JSON_CALLBACK"}, {get: { method: "JSONP"}});

        return githubAPI.get({ q: searchString});
    };
}]);

我在我的控制器中这样做

$scope.githubData = githubApiService.GetuserNames($scope.searchString);

我知道正在 returned 承诺，但我似乎无法让我的服务在 returning 数据或我的控制器等待数据之前等待。就我现在的代码而言，我立即得到一个空对象作为响应。我试过像这样在我的控制器中使用 success

scope.githubData = githubApiService.GetuserNames($scope.searchString).success(callback());

在回调中我 return 数据。然而那是行不通的。我也尝试在我的服务中使用 .$promise 和 .then 配对，但这也不起作用。

话虽如此，我该怎么做才能使 $scope.githubData 不会被分配一个空对象或等待响应？

Answer 1

伙计，现在我无法安装 $resource，但我使用 $http 做了类似的事情。

看看这个：

githubApiD3App.service('githubApiService', ['$resource', function($resource){
    return $http.get("https://api.github.com/search/users?q=" + searchString);
    };
}]);

然后使用 then 我处理结果：

scope.githubData = githubApiService.GetuserNames('engineerKev').then(function(results){
console.log(results.data.items[0]);
});

并打印：

{
  "total_count": 1,
  "incomplete_results": false,
  "items": [
    {
      "login": "engineerKev",
      "id": 3943145,
      "avatar_url": "https://avatars.githubusercontent.com/u/3943145?v=3",
      "gravatar_id": "",
      "url": "https://api.github.com/users/engineerKev",
      "html_url": "https://github.com/engineerKev",
      "followers_url": "https://api.github.com/users/engineerKev/followers",
      "following_url": "https://api.github.com/users/engineerKev/following{/other_user}",
      "gists_url": "https://api.github.com/users/engineerKev/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/engineerKev/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/engineerKev/subscriptions",
      "organizations_url": "https://api.github.com/users/engineerKev/orgs",
      "repos_url": "https://api.github.com/users/engineerKev/repos",
      "events_url": "https://api.github.com/users/engineerKev/events{/privacy}",
      "received_events_url": "https://api.github.com/users/engineerKev/received_events",
      "type": "User",
      "site_admin": false,
      "score": 40.398766
    }
  ]
}

Answer 2

这个：

$scope.githubData = githubApiService.GetuserNames($scope.searchString);

'normal' $resource 用法是正确的。但是，当 $resource 与 JSONP 结合使用时，事情可能会变得有点奇怪。尝试做这样的事情（我添加了 isArray 并更改了操作名称以避免与 $resource.get 的潜在冲突）：

githubApiD3App.service('githubApiService', ['$resource', function($resource){
    this.GetuserNames = function(searchString){
        var githubAPI = $resource("https://api.github.com/search/users", {callback: "JSON_CALLBACK"}, {getUsers: { method: "JSONP", isArray: true}});

        return githubAPI.getUsers({ q: searchString});
    };
}]);

然后在控制器中：

githubApiService.GetuserNames($scope.searchString).$promise.then(function(users){
    $scope.githubData = users;
});

这是一本关于这个主题的好书：http://www.bennadel.com/blog/2610-using-jsonp-with-resource-in-angularjs.htm

Answer 3

这是我对我的问题的回答。这不是完美的答案，只是因为我一开始就试图错误地处理承诺。这 blog post 帮助我更好地理解 promise 以及如何正确处理它们。

在我的应用程序的控制器中，我没有分配作用域变量 w/e 承诺返回，而是这样做了

githubApiService.getUsernames($scope.searchString).then(function(results){

    $scope.returnedUsers = results.data.items.splice(start, deleteCount);

    console.log($scope.returnedUsers);
});

我已经缩短了我的控制器的内容，但我基本上处理了 .then 回调函数中的所有数据操作。这一行

$scope.returnedUsers = results.data.items.splice(start, deleteCount);

既可以在回调中设置控制器中的变量，也可以用必要的数据填充它，以便在我执行 {{githubData}} 时可以在我的视图中输出。通过在回调函数中执行所有操作，我不再收到任何由于未定义变量而导致的错误。我收到错误是因为当我做这样的事情时

$scope.githubData = githubApiService.GetuserNames('engineerKev').then(function(results){
console.log(results.data.items[0]);
});
$scope.githubData.data.items.sort(sortFunction);

$scope.githubData 将是一个具有未定义属性的空对象。

这个故事的寓意，如果我仍然没有得到承诺，请编辑我的答案，就是在你的控制器的回调函数中处理你的承诺。

Angular JS 使用 $resource 并等待 promise 被解析

Angular JS using $resource and waiting for promise to be resolved

javascript

get

angularjs

angular-resource

angular-services