MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Angular promises with $q


If all you need is to wrap the value into a promise, you don't need to use the long syntax like here:

//OVERLY VERBOSE
var defer;
defer = $q.defer();
defer.resolve(['one', 'two']);
return defer.promise;


In this case you can just write:

//BETTER
return $q.when(['one', 'two']);


$q.when and its alias $q.resolve
Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when With the release of AngularJS v1.4.1

You can also use an ES6-consistent alias resolve

//ABSOLUTELY THE SAME AS when
return $q.resolve(['one', 'two'])


Using angular promises with $q service


$q is a built-in service which helps in executing asynchronous functions and using their return values(or exception) when they are finished with processing.

$q is integrated with the $rootScope.Scope model observation mechanism, which means faster propagation of resolution or rejection into your models and avoiding unnecessary browser repaints, which would result in flickering UI.

In our example, we call our factory getMyData, which return a promise object. If the object is resolved, it returns a random number. If it is rejected, it return a rejection with an error message after 2 seconds.

In Angular factory

function getMyData($timeout, $q) {
 return function() {
 // simulated async function
 var promise = $timeout(function() {
 if(Math.round(Math.random())) {
 return 'data received!'
 } else {
 return $q.reject('oh no an error! try again')
 }
 }, 2000);
 return promise;
 }
}


Using Promises on call

angular.module('app', [])
.factory('getMyData', getMyData)
.run(function(getData) {
 var promise = getData()
 .then(function(string) {
 console.log(string)
 }, function(error) {
 console.error(error)
 })
 .finally(function() {
 console.log('Finished at:', new Date())
 })
})


To use promises, inject $q as dependency. Here we injected $q in getMyData factory.

var defer = $q.defer();


A new instance of deferred is constructed by calling $q.defer()
A deferred object is simply an object that exposes a promise as well as the associated methods for resolving that promise. It is constructed using the $q.deferred() function and exposes three main methods: resolve(), reject(), and notify().

resolve(value) – resolves the derived promise with the value.
reject(reason) – rejects the derived promise with the reason.
notify(value) - provides updates on the status of the promise's execution. This may be called multiple times before the promise is either resolved or rejected.

Properties

The associated promise object is accessed via the promise property. promise – {Promise} – promise object associated with this deferred.
A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Promise Methods -

then(successCallback, [errorCallback], [notifyCallback]) – Regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.

catch(errorCallback) – shorthand for promise.then(null, errorCallback)


finally(callback, notifyCallback) – allows you to observe either the fulfillment or rejection of a promise, but to do so without modifying the final value.

One of the most powerful features of promises is the ability to chain them together. This allows the data to flow through the chain and be manipulated and mutated at each step. This is demonstrated with the following example:

Example 1:



// Creates a promise that when resolved, returns 4.
function getNumbers() {
 var promise = $timeout(function() {
 return 4;
 }, 1000);
 return promise;
}
// Resolve getNumbers() and chain subsequent then() calls to decrement
// initial number from 4 to 0 and then output a string.
getNumbers()
 .then(function(num) {
 // 4
 console.log(num);
 return --num;
 })
 .then(function (num) {
 // 3
 console.log(num);
 return --num;
 })
 .then(function (num) {
 // 2
 console.log(num);
 return --num;
 })
 .then(function (num) {
 // 1
 console.log(num);
 return --num;
 })
 .then(function (num) {
 // 0
 console.log(num);
 return 'And we are done!';
 })
 .then(function (text) {
 // "And we are done!"
 console.log(text); 
 });


Conclusion

In this page (written and validated by ) you learned about AngularJS AngularJS promises with $q . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Dependency Injection.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.