小编典典

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

angularjs

我正在看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();

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

我不理解这一点错吗?那怎么可能?我认为它真的很干净,我只是不明白。

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

更重要的是,因为这是可能的,我如何编写一个利用此相同功能的Angular服务?除了ajax请求外,还有其他类型的数据存储区需要异步调用,这些存储可以在JavaScript中使用,我希望能够以这种方式同步编写代码。例如,IndexedDB。如果我能全神贯注于Angular的内置资源的运行方式,那么我会做个尝试。


阅读 243

收藏
2020-07-04

共1个答案

小编典典

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

2020-07-04