StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow does the $resource `get` function work synchronously in AngularJS?
text
Body
copied!<p>I was watching <a href="http://www.youtube.com/watch?v=IRelx4-ISbs" rel="noreferrer">this</a> AngularJS tutorial describing how to hook into Twitter with an Angular resource. (<a href="http://www.youtube.com/watch?v=IRelx4-ISbs" rel="noreferrer">Video tutorial</a>) Here is the resource that is set up in the example controller:</p> <pre><code>$scope.twitter = $resource('http://twitter.com/:action', {action: 'search.json', q: 'angularjs', callback: 'JSON_CALLBACK'}, {get: {method: 'JSONP'}}); </code></pre> <p>The tutorial shows that there are a couple ways to get data back from the resource using the <code>get</code> call. The first method is by passing a callback to the get function. The callback will be called with the result after the ajax request returns:</p> <pre><code>$scope.twitter.get(function(result) { console.log('This was the result:', result); }); </code></pre> <p>I understand this method. It makes perfect sense to me. The resource represents a place on the web where you can get data, and <code>get</code> simply makes an ajax call to a url, gets json back, and calls the callback function with the json. The <code>result</code> param is that json.</p> <p>It makes sense to me because it seems obvious that this is an asynchronous call. That is, under the hood, the ajax call fires, and the code following the call isn't blocked, it continues to be executed. Then at some indeterminate point later on, when the xhr is successful, the callback function is called.</p> <p>Then the tutorial shows a different method that looks a lot simpler, but I don't understand how it works:</p> <pre><code>$scope.twitterResult = $scope.twitter.get(); </code></pre> <p>I assume that the xhr underneath <code>get</code> must be asynchronous, yet in this line we are assigning the return value of the <code>get</code> call to a variable, as if it returned synchronously.</p> <p>Am I wrong for not understanding this? How is that possible? I think it's really neat that it works, I just don't get it.</p> <p>I understand that <code>get</code> can return <em>something</em> while the xhr underneath it goes off and processes asynchronously, but if you follow the code example yourself, you will see that <code>$scope.twitterResult</code> gets the actual twitter content before any subsequent lines are executed. For example, if you write <code>console.log($scope.twitterResult)</code> immediately after that line, you will see the results from twitter logged in the console, not a temporary value that is replaced later on.</p> <p>More importantly, because this is possible, how can I write an Angular service that takes advantage of this same functionality? Besides ajax requests, there are other types of data stores requiring asynchronous calls that can be used in JavaScript which I would love to be able to write code for synchronously in this style. For example, IndexedDB. If I could wrap my head around how Angular's built-in resources are doing it, I would give it a shot.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload