43

我正在观看这个AngularJS 教程，该教程描述了如何使用 Angular 资源连接到 Twitter。（视频教程）这是在示例控制器中设置的资源：

$scope.twitter = $resource('http://twitter.com/:action',
    {action: 'search.json', q: 'angularjs', callback: 'JSON_CALLBACK'},
    {get: {method: 'JSONP'}});

本教程显示有几种方法可以使用get调用从资源中取回数据。第一种方法是将回调传递给 get 函数。ajax 请求返回后，将使用结果调用回调：

$scope.twitter.get(function(result) {
    console.log('This was the result:', result);
});

我理解这种方法。这对我来说很有意义。该资源代表网络上一个可以获取数据的地方，get只需对 url 进行 ajax 调用，获取 json，然后使用 json 调用回调函数。参数是那个resultjson。

这对我来说很有意义，因为很明显这是一个异步调用。也就是说，在幕后，ajax 调用会触发，并且调用之后的代码不会被阻塞，它会继续执行。然后在稍后的某个不确定点，当 xhr 成功时，回调函数被调用。

然后教程显示了一种看起来简单得多的不同方法，但我不明白它是如何工作的：

$scope.twitterResult = $scope.twitter.get();

我假设下面的 xhrget必须是异步的，但在这一行中，我们将get调用的返回值分配给一个变量，就好像它同步返回一样。

我不理解这一点是错的吗？这怎么可能？我认为它真的很好用，我只是不明白。

我知道它可以在它下面的 xhr 关闭并异步处理时get返回一些东西$scope.twitterResult，但是如果您自己遵循代码示例，您将看到在执行任何后续行之前获取实际的 twitter 内容。例如，如果您console.log($scope.twitterResult)在该行之后立即写入，您将在控制台中看到来自 twitter 的结果，而不是稍后替换的临时值。

更重要的是，因为这是可能的，我如何编写一个利用相同功能的 Angular 服务？除了 ajax 请求之外，还有其他类型的数据存储需要异步调用，可以在 JavaScript 中使用，我希望能够以这种风格同步编写代码。例如，索引数据库。如果我能理解 Angular 的内置资源是如何做到的，我会试一试。

4

2 回答 2

63

$resource 不是同步的，尽管此语法可能表明它是：

$scope.twitterResult = $scope.twitter.get();

这里发生的是对 AngularJS 的调用将在调用后立即返回twitter.get()，结果是一个空数组。然后，当异步调用完成并且真实数据从服务器到达时，数组将更新为 data。AngularJS 将简单地保留对返回数组的引用，并在数据可用时填充它。

这是发生“魔术”的 $resource 实现的片段：https ://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L372

这在$resource 文档中也有描述：

重要的是要意识到调用 $resource 对象方法会立即返回一个空引用（对象或数组取决于isArray）。从服务器返回数据后，现有参考将填充实际数据。这是一个有用的技巧，因为通常将资源分配给模型，然后由视图呈现。拥有一个空对象不会导致渲染，一旦数据从服务器到达，那么该对象就会被数据填充，并且视图会自动重新渲染自身以显示新数据。这意味着在大多数情况下，我们不必为操作方法编写回调函数。

于 2012-08-15T08:56:39.037 回答
5

$q 也可以做到这一点。您可以使用以下方法将普通对象转换为“延迟值”：

var delayedValue = function($scope, deferred, value) {
    setTimeout(function() {
        $scope.$apply(function () {
            deferred.resolve(value);
        });
    }, 1000);
    return deferred.promise;
};

然后在控制器中使用它，以获得与 $scope.twitter.get() 在 OP 示例中所做的类似的效果

angular.module('someApp', [])
.controller('someController', ['$scope', '$q', function($scope, $q) {
  var deferred = $q.defer();
  $scope.numbers = delayedValue($scope, deferred, ['some', 'numbers']);
}]);
于 2012-12-26T17:23:59.127 回答