I'm struggling to understand why after calling updateStatus() I see 'promise resolved' logged to the console, but not 'refreshGames'. How is the promise resolved if the code inside refreshGames() never runs?
var refreshGames = function() {
console.log('refreshGames');
var defer = $q.defer();
playersService.getGames({
playerId: playerId
}).$promise.then(function(data) {
vm.games = data;
return defer.promise;
});
};
var updateStatus = function() {
$q.all([refreshGames.promise]).then(function() {
console.log('promise resolved');
populateOptions(vm.games);
vm.tableParams.reload();
});
};
Because your function refreshGames returns nothing, it should return the promise and the defer must be resolved, like this:
var refreshGames = function() {
console.log('refreshGames');
var defer = $q.defer();
playersService.getGames({
playerId: playerId
}).$promise.then(function(data) {
vm.games = data;
defer.resolve(data);
});
return defer.promise;
};
and in the $q.all you just do refreshGames()
refreshGames.promise is undefined - there's no code anywhere that creates this property on refreshGames
any non-promise in $q.all is promisified and effectively equivalent to Promise.resolve(n) (or however you do that with $q
so, your $q.all is essentially
$q.all([undefined]).then(function() {
...
});
and thus gets executed immediately
Related
So I have a situation where I have multiple promise chains of an unknown length. I want some action to run when all the CHAINS have been processed. Is that even possible? Here is an example:
app.controller('MainCtrl', function($scope, $q, $timeout) {
var one = $q.defer();
var two = $q.defer();
var three = $q.defer();
var all = $q.all([one.promise, two.promise, three.promise]);
all.then(allSuccess);
function success(data) {
console.log(data);
return data + "Chained";
}
function allSuccess(){
console.log("ALL PROMISES RESOLVED")
}
one.promise.then(success).then(success);
two.promise.then(success);
three.promise.then(success).then(success).then(success);
$timeout(function () {
one.resolve("one done");
}, Math.random() * 1000);
$timeout(function () {
two.resolve("two done");
}, Math.random() * 1000);
$timeout(function () {
three.resolve("three done");
}, Math.random() * 1000);
});
In this example, I set up a $q.all() for promises one, two, and three which will get resolved at some random time. I then add promises onto the ends of one and three. I want the all to resolve when all the chains have been resolved. Here is the output when I run this code:
one done
one doneChained
two done
three done
ALL PROMISES RESOLVED
three doneChained
three doneChainedChained
Is there a way to wait for the chains to resolve?
I want the all to resolve when all the chains have been resolved.
Sure, then just pass the promise of each chain into the all() instead of the initial promises:
$q.all([one.promise, two.promise, three.promise]).then(function() {
console.log("ALL INITIAL PROMISES RESOLVED");
});
var onechain = one.promise.then(success).then(success),
twochain = two.promise.then(success),
threechain = three.promise.then(success).then(success).then(success);
$q.all([onechain, twochain, threechain]).then(function() {
console.log("ALL PROMISES RESOLVED");
});
The accepted answer is correct. I would like to provide an example to elaborate it a bit to those who aren't familiar with promise.
Example:
In my example, I need to replace the src attributes of img tags with different mirror urls if available before rendering the content.
var img_tags = content.querySelectorAll('img');
function checkMirrorAvailability(url) {
// blah blah
return promise;
}
function changeSrc(success, y, response) {
if (success === true) {
img_tags[y].setAttribute('src', response.mirror_url);
}
else {
console.log('No mirrors for: ' + img_tags[y].getAttribute('src'));
}
}
var promise_array = [];
for (var y = 0; y < img_tags.length; y++) {
var img_src = img_tags[y].getAttribute('src');
promise_array.push(
checkMirrorAvailability(img_src)
.then(
// a callback function only accept ONE argument.
// Here, we use `.bind` to pass additional arguments to the
// callback function (changeSrc).
// successCallback
changeSrc.bind(null, true, y),
// errorCallback
changeSrc.bind(null, false, y)
)
);
}
$q.all(promise_array)
.then(
function() {
console.log('all promises have returned with either success or failure!');
render(content);
}
// We don't need an errorCallback function here, because above we handled
// all errors.
);
Explanation:
From AngularJS docs:
The then method:
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.
$q.all(promises)
Combines multiple promises into a single promise that is resolved when
all of the input promises are resolved.
The promises param can be an array of promises.
About bind(), More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Recently had this problem but with unkown number of promises.Solved using jQuery.map().
function methodThatChainsPromises(args) {
//var args = [
// 'myArg1',
// 'myArg2',
// 'myArg3',
//];
var deferred = $q.defer();
var chain = args.map(methodThatTakeArgAndReturnsPromise);
$q.all(chain)
.then(function () {
$log.debug('All promises have been resolved.');
deferred.resolve();
})
.catch(function () {
$log.debug('One or more promises failed.');
deferred.reject();
});
return deferred.promise;
}
There is a way. $q.all(...
You can check the below stuffs:
http://jsfiddle.net/ThomasBurleson/QqKuk/
http://denisonluz.com/blog/index.php/2013/10/06/angularjs-returning-multiple-promises-at-once-with-q-all/
You can use "await" in an "async function".
app.controller('MainCtrl', async function($scope, $q, $timeout) {
...
var all = await $q.all([one.promise, two.promise, three.promise]);
...
}
NOTE: I'm not 100% sure you can call an async function from a non-async function and have the right results.
That said this wouldn't ever be used on a website. But for load-testing/integration test...maybe.
Example code:
async function waitForIt(printMe) {
console.log(printMe);
console.log("..."+await req());
console.log("Legendary!")
}
function req() {
var promise = new Promise(resolve => {
setTimeout(() => {
resolve("DARY!");
}, 2000);
});
return promise;
}
waitForIt("Legen-Wait For It");
I'm using ES6 javascript promises in Chrome and am having trouble understanding why the promise executed within the function _getStatus() is not returning the result argument in the success handler which would result in the alert box containing "done". Instead, I get an alert box that says "undefined".
myNameSpace = function(){
var obj = {
groupA: {
status: "inactive"
},
groupB: {
status: "active"
}
};
function _getStatus(group){
_finishTask().then(function(result){
return result; // doesn't return anything
});
}
function _finishTask(){
var promise = new Promise(function(resolve, reject){
// do some task before resolving
resolve("done");
});
return promise;
};
return{
getStatus:_getStatus
}
}();
$(function(){
alert(myNameSpace.getStatus("groupA")); // why is this "undefined" instead of "done"?
});
Because this is not how Promises work. You need to make sure both _getStatus and _finishTask return Promise objects. Then you will be able to use those promises API methods to execute subsequent code what promise is resolved.
So your code should look something like this:
myNameSpace = function() {
var obj = {
groupA: {
status: "inactive"
},
groupB: {
status: "active"
}
};
function _getStatus(group) {
return _finishTask().then(function(result) {
return result + " and tested";
});
}
function _finishTask() {
return new Promise(function(resolve, reject) {
// do some task before resolving
resolve("done");
});
};
return {
getStatus: _getStatus
}
}();
myNameSpace.getStatus("groupA").then(alert);
Finally, regarding this construction:
return _finishTask().then(function(result) {
return result;
});
_finishTask returns a Promise object, when this promise is resolved you get into then callback. Whatever value you return from this callback becomes a new resolution value for the subsequent success callbacks down the resolution chain.
Demo: http://plnkr.co/edit/K1SWKuTYA3e46RxdzkCe?p=preview
You cant return a result from an asynchronous function as the code running it has already finished by the time the response is returned.
You can however pass in a callback to execute once the code is complete:
function _getStatus(group, callback){
_finishTask().then(function(result){
callback(result);
});
}
$(function(){
myNameSpace.getStatus("groupA", function(result) {
alert(result);
});
});
or use the promise api itself (in this case your _getStatus method is a little redundant):
function _getStatus(group){
return _finishTask();
}
$(function(){
myNameSpace.getStatus("groupA").then(function(result) {
alert(result);
});
});
In the following code, attenCalendar.refresh(); method calls a sequence of requests/responses and executes asynchronously. It needs to be finished in order to attenCalendar.getItem be successful. I used promises to solve it, but apparently promise resolves before the refresh completes and causes to attenCalendar.getItem returns null.
How can I block the sequence till refresh() finishes?
yield promise_attendee1_assert();
function attendeeRefresh(){
let deferred = Promise.defer();
attenCalendar.refresh();
deferred.resolve("refreshed");
return deferred.promise;
}
function promise_attendee1_assert(){
let deferred = Promise.defer();
let promise = attendeeRefresh();
promise.then(function onRefreshed(refreshNote) {
dump("refreshedattendee"+refreshNote);
attenCalendar.getItem(attendItem.id, {
onGetResult: function onGetResult(cal, stat, type, detail, count, items) {
retrievedItem = items[0];
//prints null
dump("\nattendeeitem:"+retrievedItem.title);
},
onOperationComplete: function() {
deferred.resolve();
}
});
});
return deferred.promise;
}
If I have the following functions:
doTask1: function ($scope) {
var defer = $q.defer();
$http.get('/abc')
.success(function (data) {
defer.resolve();
})
.error(function () {
defer.reject();
});
return defer.promise;
},
doTask2: function ($scope) {
var defer = $q.defer();
var x = 99;
return defer.promise;
},
I'm told that I can wait for both promises like this:
$q.all([
doTask1($scope),
doTask2($scope)
])
.then(function (results) {
});
How about if task 2 does not return a promise? I saw in the $q documentation
for AngularJS that there is a "when". However I am not clear on how to use it
and there's no example.
Is it the case that I MUST have doTask2 return a promise by having the two lines:
var defer = q.defer()
return defer.promise
or is there an easier way to do this?ll
$q.when is used in scenarios where you don't know upfront whether the function is returning a promise or a direct value.
The following example/plunker shows a method, whose result is used in $q.all, and which returns different type of object (int or promise) every time it's called:
PLUNKER
app.controller('MainController', function($scope, $q, $http) {
var count = 0;
function doTask1() {
var defer = $q.defer();
$http.get('abc.json')
.success(function (data) {
defer.resolve(data);
})
.error(function () {
defer.reject();
});
return defer.promise;
}
/**
* This method will return different type of object
* every time it's called. Just an example of an unknown method result.
**/
function doTask2() {
count++;
var x = 99;
if(count % 2){
console.log('Returning', x);
return x;
} else {
var defer = $q.defer();
defer.resolve(x);
console.log('Returning', defer.promise);
return defer.promise;
}
}
$scope.fetchData = function(){
// At this point we don't know if doTask2 is returning 99 or promise.
// Hence we wrap it in $q.when because $q.all expects
// all array members to be promises
$q.all([
$q.when(doTask1()),
$q.when(doTask2())
])
.then(function(results){
$scope.results = results;
});
};
});
<body ng-app="myApp" ng-controller='MainController'>
<button ng-click="fetchData()">Run</button>
<pre>{{results|json}}</pre>
</body>
is there an easier way to do this [than manually constructing and resolving a deferred and returning a promise]?
Yes, use the $q.when function:
doTask2: function ($scope) {
return $q.when( 99 );
},
However, you don't actually need to do this. $q.all will - though not stated in the docs - also work with non-promise values (implementation calls _ref which converts it). So just
return 99;
is fine as well. However, if you know beforehand that it's synchronous, using promises doesn't seem to make much sense.
I have 2 functions:
getDocument: function(title){
var defer = $q.defer();
$timeout(function(){
defer.resolve(true);
console.log(1);
},2000);
return defer.promise;
},
anotherFunc : function(){
var defer = $q.defer();
console.log(2);
defer.resolve(document);
return defer.promise;
}
and a call:
when('/entry/:title', {templateUrl: 'partials/views/entry.php', controller: 'entryCtrl',resolve: {
document: function($q,$route,$log,document){
var defer = $q.defer();
document.getDocument()
.then(document.anotherFunc());
return defer.promise;
}
}}).
Although i have applied a timeout to getDocument(), anotherFunc() get's called, even when the promise has not been resolved yet.
Why is this?
How can i avoid this behaviour?
anotherFunc() get's called, even when the promise has not been resolved yet.
Because you have called it:
… document.anotherFunc() …
^^
Instead, you want to pass a function into then() that will get called when the promise resolves:
….then(document.anotherFunc)
// or, more explicit and preserving 'this':
….then(function(promiseResult) {
document.anotherFunc();
})