$resource `get` 函数如何在 AngularJS 中同步工作？

IT技术 javascript angularjs
2021-01-31 06:42:20

我正在看这个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调用回调函数。该result参数是该JSON。

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

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

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

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

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

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

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

2个回答

$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）。从服务器返回数据后，现有引用将填充实际数据。这是一个有用的技巧，因为通常资源被分配给一个模型，然后由视图呈现。拥有一个空对象会导致没有渲染，一旦数据从服务器到达，对象就会被数据填充，并且视图会自动重新渲染以显示新数据。这意味着在大多数情况下，您永远不必为操作方法编写回调函数。

是的，这对我来说很有意义。对我来说没有意义的是，console.log这里的行没有打印空引用，它打印了一个来自 twitter 的真实结果：数据$scope.twitterResult = $scope.twitter.get(); console.log('result', $scope.twitterResult); 怎么可能在下一行代码之前被填充？另外，感谢参考。
2021-03-23 06:42:20
我只是想在这里指出，在 AngularJS 1.2 中，模板中的 Promise 不再自动展开。如果您只是将您从 $http、$resource 等获得的Promise直接分配给 $scope 变量，那么当您在视图中引用它们时，不要期望它们会起作用。他们不会。有关详细信息，请参阅他们的迁移文档：docs.angularjs.org/guide/migration
2021-04-06 06:42:20
中继console.log()，因为我看到console.log 的一些奇怪效果和打印更新的数组（基本上有时log 会获取更改并显示它们！）。要查看发生了什么，请尝试以下操作：console.log(angular.copy($scope.twitterResult)) 因此请确保您正在打印调用中的值。这真的是关于时间的，你可能会在控制台有机会打印任何东西之前从 $resource 得到结果......
2021-04-07 06:42:20
你知道吗 - 你是对的。 console.log是罪魁祸首。如果我这样做，我会得到一个空对象：alert(JSON.stringify($scope.twitterResult));感谢您的帮助！
2021-04-13 06:42:20

$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']);
}]);
其它你可能感兴趣的问题
上一篇如何在 Javascript 中获取对象在页面上的绝对位置？ 下一篇ZIP Code（美国邮政编码）验证