Develop Reference

How to cancel a promise with $q in angular js

I have a service below. I will call this service every time when I open a model and when I close the model and then open another one the previous values are getting reflected and in this case I want to cancel the promise every time I close the model.
I have tried the following code,
Model closing.js
$scope.closeButton = function() {
DetailDataSvc.storeDefer().resolve()
}
My Service, (DetailDataSvc)
self.storeDefer = function() {
return self.deferReturn;
};
self.getDetailReportData = function(postData, functionName) {
var promises = {};
var d = $q.defer(),
metricDataType;
self.deferReturn = $q.defer();
promises = {
detailReport: metricDataType,
recommendedMetrics: DataSvc.getData(_logPrefix + functionName, recommendedMetricUrl),
metricInfo: DataSvc.getData(_logPrefix + functionName, metricInfoUrl)
};
$q.all(promises).then(function(res) {
$log.debug(_logPrefix + 'getDetailReportData(). Called from %s. $q.all Response (raw): ', functionName, res);
else {
if (response && !_.isEmpty(_.get(response, 'largeCard.chartData.dataValues.rows')) && response.overlayEnabled) {
self.getMetricOverLay(pdata, functionName).then(function(overlayData) {
response.largeCard.chartData.overlay = overlayData;
d.resolve(response);
}, function(msg, code) {
d.reject(msg);
$log.error(_logPrefix + 'getDetailReportData(). Error code: %s. Error: ', code, msg);
});
} else {
d.resolve(response);
}
}
}, function(msg, code) {
d.reject(msg);
$log.error(_logPrefix + 'getDetailReportData(). Error code: %s. Error: ', code, msg);
});
return d.promise;
};
Can anyone please help me whether the process I followed is the right one.

What you have attempted could be made to work but it's best fixed by racing the promise returned by $q.all() against a rejectable Deferred (ie. a Deferred, of which a reference is kept to its reject method), thus avoiding the deferred anti-pattern.
self.getDetailReportData = function(postData, functionName) {
var metricDataType = ......; // ???
var d = $q.defer();
// cancel previous
if(self.cancelDetailReport) {
self.cancelDetailReport(new Error('previous getDetailReportData() cancelled'));
}
// keep a reference to the deferred's reject method for next time round.
self.cancelDetailReport = d.reject;
var promises = {
'detailReport': metricDataType,
'recommendedMetrics': DataSvc.getData(_logPrefix + functionName, recommendedMetricUrl),
'metricInfo': DataSvc.getData(_logPrefix + functionName, metricInfoUrl)
};
// Race aggregated `promises` against `d.promise`, thus providing the required cancellation effect.
return $q.race([$q.all(promises), d.promise])
.then(function(response) {
// arrive here only if all promises resolve and d.reject() has not been called.
$log.debug(_logPrefix + 'getDetailReportData(). Called from %s. $q.all Response (raw): ', functionName, response);
if (response && !_.isEmpty(_.get(response, 'largeCard.chartData.dataValues.rows')) && response.overlayEnabled) {
return self.getMetricOverLay(pdata, functionName)
.then(function(overlayData) {
response.largeCard.chartData.overlay = overlayData;
return response;
});
} else {
return response;
}
})
.catch(function(msg, code) { // signature?
// all error cases including cancellation end up here.
var message = _logPrefix + `getDetailReportData(). Error: (${code}): ${msg}`; // or similar
$log.error(message);
throw new Error(message); // see https://stackoverflow.com/a/42250798/3478010
});
};
Notes:
$q.race() is transparent to whichever promise wins the race, and opaque to the other. So, if the d is rejected before the promise returned by $q.all() settles, then d will win out; response handling will not happen and d's rejection will fall through to the .catch() clause. Alternatively, if the promise returned by $q.all(promises) wins out then flow will follow that promise's success path (ie response handling) or possibly its error path (which will drop through to the .catch() clause).
Not too sure about the signature of the .catch() callback. You would normally expect it to accept a single error argument.

Assign already created deferred.
Try and change this line:
self.deferReturn = $q.defer();
self.deferReturn = d;

More JQuery/Ajax and when/done/promise confusion

Once again I struggle with ajax calls - this time around some chaining issue. Overall here is what I need to accomplish:
I loop over some array, and for each item in the array, I need to do the following:
Issue an Ajax call, and upon success, I need to issue three other calls, which must be chained, so they run in sequence.
When all the items in the array have both their main call and the three chained subcalls completed, I must be able to do some action.
My problem is, that the program does not wait for the three chained subcalls to complete. In the code below, this can be seen by the "Done" statement in the log turns up before the subcalls have completed.
I have created a JSFiddle here: https://jsfiddle.net/LeifFrederiksen/td534phz/1/
Note: I have two different function for the addAttachments function (addAttachments and addAttachmentsAlternative) - none of them works like they should.
var items = ["A","B"];
save();
function doneSaving() {
log("<H1>Done</H1>");
}
function save() {
// Save all items, and do something when all is done...
log("<H1>Save initiated</H1>");
var returnValue = saveItems();
$.when(returnValue).done(function() {
doneSaving();
})
}
function saveItems() {
// Loop through all items and save each of them...
var requests = Array();
// Build array of requests to wait for...
for (item of items) {
requests.push(saveOneItem(item));
}
var returnValue = $.when.apply($, requests).done(function() {
log("All requests completed");
})
return returnValue;
}
function saveOneItem(item) {
// Save one item...
return addListItem(item,addListItemSuccess,addListItemFailure);
}
function addListItem(item, successFunction, failureFunction) {
// The actual ajax that handles saving to database (actually Sharepoint via REST)...
log("addListItem on: " + item);
var returnValue =
$.ajax({
url: "/echo/json/",
data: {html: item,
delay: 1},
}).done(function (data) {
if (successFunction != undefined) {
returnValue = successFunction(item, data); // Returns the newly created list item information
return returnValue;
}
}).fail(function (data) {
return failureFunction(item, data);
});
return returnValue;
}
function addListItemSuccess(item,data) {
log("addListItem succces - in succes function for " + item);
returnValue = addAttachmentsAlternative(item,data);
return returnValue;
}
function addAttachments(item,data) {
var attachment1Deferred = addListItem(item + "-attachment 1",addAttachmentSuccess,addAttachmentFailure);
var attachment2Deferred = attachment1Deferred.then(
function() {
return addListItem(item + "-attachment 2",addAttachmentSuccess,addAttachmentFailure);
});
var attachment3Deferred = attachment2Deferred.then(
function() {
return addListItem(item + "-attachment 3",addAttachmentSuccess,addAttachmentFailure);
});
attachment3Deferred.done(
function() {
log("Completed upload of all attachments for " + item);
})
return attachment3Deferred;
}
function addAttachmentsAlternative(item,data) {
return addListItem(item + "-attachment 1",addAttachmentSuccess,addAttachmentFailure)
.done(function(data) {
return addListItem(item + "-attachment 2",addAttachmentSuccess,addAttachmentFailure)
}).done(function(data) {
return addListItem(item + "-attachment 3",addAttachmentSuccess,addAttachmentFailure)
}).done(function(data) {
log("Completed alternative upload of all attachments for " + item);
});
}
function addAttachmentSuccess(item,data) {
log("addAttachment succces - in succes function for " + item);
var deferred = $.Deferred();
deferred.resolve();
return deferred;
}
function addListItemFailure(item,data) {
console.log("addListItem failed - calling failure function for " + item);
$("#console").append("<P>addListItem failed - in failure function for " + item);
}
function addAttachmentFailure(item,data) {
console.log("addListItem failed - calling failure function for " + item);
$("#console").append("<P>addListItem failed - in failure function for " + item);
}
function log(message) {
console.log(message);
$("#console").append("<P>" + message);
}
I am hoping to achieve some generic pattern that I can use in different cases.
I got my inspiration from this great article, but cannot get it to work in my scenario: https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f#.tu0sruz5k
Any ideas and inputs are more than welcome.
Regards
Leif

There are several issues with the provided example:
to chain the tasks of creating list items and adding attachments use
.then instead of .done. With .done callback that prints All requests completed it is fired once deferred (first ajax call in addListItem function) is getting resolved.
some functions like addListItem still uses callback function syntax, i would suggest convert them to promises
since all deferred are getting resolved in saveItems function there is no need to use jQuery.when() in save function
Modified demo

Http Service Factory Returns Undefined to Controller in Angular

I have this service, that initialize brands and actualBrand variables.
.factory('brandsFactory', ['$http', 'ENV', function brandsFactory($http, ENV){
var actualBrand = {};
var brands = getBrands(); //Also set the new actualBrand by default
function getBrands(){
var URL;
console.log('MOCKS enable? ' + ENV.mocksEnable);
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.getBrandsMock;
}else{
URL = ENV.apiURL + ENV.getBrands;
}
$http.get(URL).
success(function(data){
console.log('data is :' + data);
actualBrand = data[0];
console.log('Actual brand is ' + actualBrand);
return data;
}).
error(function(){
console.log('Error in BrandsController');
});
}
var setActualBrand = function(activeBrand) {
actualBrand = activeBrand;
};
var isSetAsActualBrand = function(checkBrand) {
return actualBrand === checkBrand;
};
return {
brands : brands,
actualBrand : actualBrand
};
And my controller looks like this:
/* BrandController to manage the html content of a single brand */
.controller('BrandCController', function(brandsFactory, $scope){
$scope.brands = brandsFactory.brands;
console.log('brands in controller is ' + $scope.brands + ' -- ' + brandsFactory.brands);
});
The problem in the controller is that it gets undefined in brandsFactory.brands because its loaded before the service.
Why can I do to solve this?
Im really new in angular and javascript, maybe Im doing lots of thing wrong.
Any help I would be grateful, thank you.

The reason why it is undefined is actually because of the asynchronous nature of $http requests. There is nothing (well, basically nothing) you can do to change this behaviour. You are going to have to resolve this using the most common way (and if you continue with Angular and most web development languages, this will become a long-standing practices) with promises.
What is a promise? There are many guidelines online for what it is. The most basic way to explain it to you is that a promise will not execute until the asynchronous operation returns.
https://docs.angularjs.org/api/ng/service/$q
http://andyshora.com/promises-angularjs-explained-as-cartoon.html
Right now, when you console.log the property, it may/may not have already been loaded (in fact, it probably hasn't) thus you get undefined.
Furthermore, I am not exactly sure about this, but you are using the factory provider, yet you don't return anything from the provider function, thus you are using it as if it were a service. I'm not 100% sure if Angular allows this, but certainly the best practice way is to return the instance of what you want to create from the factory.

Im really new in angular and javascript, maybe Im doing lots of thing wrong. Any help I would be grateful, thank you.
You are correct -- you are doing lot's of things wrong. Let's start with the getBrands function:
//Erroneously constructed function returns undefined
//
function getBrands(){
var URL;
console.log('MOCKS enable? ' + ENV.mocksEnable);
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.getBrandsMock;
}else{
URL = ENV.apiURL + ENV.getBrands;
}
$http.get(URL).
success(function(data){
console.log('data is :' + data);
actualBrand = data[0];
console.log('Actual brand is ' + actualBrand);
//SUCCESS METHOD IGNORES RETURN STATEMENTS
return data;
}).
error(function(){
console.log('Error in BrandsController');
});
The return data statement is nested inside a function which is the argument of an $http .success method. It does not return data to the getBrands function. Since there is no return statement in the getBrands body, the getBrands function returns undefined.
In addition the .success method of the $http service ignores return values. Thus the $http service will return a promise that resolves to a response object instead of a data object. To return a promise that resolves to a data object, use the .then method.
//Correctly constructed function that returns a promise
//that resolves to a data object
//
function getBrands(){
//return the promise
return (
$http.get(URL)
//Use .then method
.then (function onFulfilled(response){
//data is property of response object
var data = response.data;
console.log('data is :' + data);
var actualBrand = data[0];
console.log('Actual brand is ' + actualBrand);
//return data to create data promise
return data;
})
)
}
With a return statement inside the onFulfilled function and a return statement in the body of the getBrands function, the getBrands function will return a promise that resolves fulfilled with data (or resolves rejected with a response object.)
In the controller, resolve the promise with the .then and .catch methods.
brandsFactory.getBrands().then(function onFulfilled(data){
$scope.brand = data;
$scope.actualBrand = data[0];
}).catch( function onRejected(errorResponse){
console.log('Error in brands factory');
console.log('status: ', errorResponse.status);
});
Deprecation Notice1
The $http legacy promise methods .success and .error have been deprecated. Use the standard .then method instead.
UPDATE
I use $q promise to solve it. I use the .then in the controller, but I couldn't make it work in the factory. If you want to check it. And thanks for the feedback.
//Classic `$q.defer` Anti-Pattern
//
var getBrands = function(){
var defered = $q.defer();
var promise = defered.promise;
$http.get(URL)
.success(function(data){
defered.resolve(data);
})
.error(function(err){
console.log('Error in BrandsController');
defered.reject(err);
});
return promise;
};//End getBrands
This is a classic $q.defer Anti-Pattern. One of the reasons that the .sucesss and .error methods were deprecated was that they encourage this anti-pattern as a result of the fact that those methods ignore return values.
The major problem with this anti-pattern is that it breaks the $http promise chain and when error conditions aren't handled properly the promise hangs. The other problem is that often programmers fail to create a new $q.defer on subsequent invocations of the function.
//Same function avoiding $q.defer
//
var getBrands = function(){
//return derived promise
return (
$http.get(URL)
.then(function onFulfilled(response){
var data = response.data;
//return data for chaining
return data;
}).catch(function onRejected(errorResponse){
console.log('Error in BrandsController');
console.log('Status: ', errorResponse.status;
//throw value to chain rejection
throw errorResponse;
})
)
};//End getBrands
This example shows how to log a rejection and throw the errorResponse object down the chain to be used by other rejection handlers.
For more information on this, see Angular execution order with $q.
Also, Why is angular $http success/error being deprecated?.
And, Is this a “Deferred Antipattern”?

I think the issue you are having is that your controller is trying to access a property that is being set by an $http.get call. $http.get returns a promise, which is an asynchronous call to the URL you are providing to get your brands. That means that the controller making the call will not wait for the brands to be loaded.
There are a few options for solving this issue, but you can simply return the promise from the service and resolve it in the controller.
function getBrands(){
var URL;
console.log('MOCKS enable? ' + ENV.mocksEnable);
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.getBrandsMock;
}else{
URL = ENV.apiURL + ENV.getBrands;
}
return $http.get(URL);
});
Then in your controller you can put the success and error functions as so...
brandsFactory.brands().then(function(response){
$scope.brand = response.data;
$scope.actualBrand = response.data[0];
}, function(err){
console.log('Error in brands factory');
});
There are other options as well (such as lazy loading or putting the factory directly on your scope), but you can look into those if you'd like.

I solve it using $q promise.
.factory('brandsFactory', ['$http', '$q', 'ENV', function brandsFactory($http, $q, ENV){
var actualBrand = {};
var getBrands = function(){
var URL;
var defered = $q.defer();
var promise = defered.promise;
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.getBrandsMock;
}else{
URL = ENV.apiURL + ENV.getBrands;
}
$http.get(URL)
.success(function(data){
actualBrand = data[0];
defered.resolve(data);
})
.error(function(err){
console.log('Error in BrandsController');
defered.reject(err);
});
return promise;
};//End getBrands
var setActualBrand = function(activeBrand) {
actualBrand = activeBrand;
};
var isSetAsActualBrand = function(checkBrand) {
return actualBrand === checkBrand;
};
return {
setActualBrand : setActualBrand,
getBrands : getBrands
};
}])//End Factory
And in my controller:
/* BrandController to manage the html content of a single brand */
.controller('BrandCController', function(brandsFactory, $scope){
$scope.brands = [];
$scope.actualBrand = {};
$scope.setActualBrand = function(brand){
brandsFactory.setActualBrand(brand);
$scope.actualBrand = brand;
};
brandsFactory.getBrands()
.then(function(data){
$scope.brands = data;
$scope.actualBrand = data[0];
})
.catch(function(errorResponse){
console.log('Error in brands factory, status : ', errorResponse.status);
});
});//End controller
If I can improve my answer let me know. I use it all the information I got from the previous answers. Thank you anyone who helps.
UPDATE
Removing the $q.defer Anti-Pattern in my factory.
.factory('brandsFactory', ['$http', '$q', 'ENV', function brandsFactory($http, $q, ENV){
var actualBrand = {};
var getBrands = function(){
var URL;
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.getBrandsMock;
}else{
URL = ENV.apiURL + ENV.getBrands;
}
return (
$http.get(URL)
.then(function onFulfilled(response){
var data = response.data;
//return data for chaining
return data;
}).catch(function onRejected(errorResponse){
console.log('Error in BrandsController');
console.log('Status: ', errorResponse.status);
return errorResponse;
})
);
};//End getBrands
var setActualBrand = function(activeBrand) {
actualBrand = activeBrand;
};
return {
setActualBrand : setActualBrand,
getBrands : getBrands
};
}]);//End Factory

JavaScript Promises

Im trying to understand promises, but Im hitting a roadblock, I'm trying to query my Parse database for the last ran date object so that ill know when it was ran last. Then pass that date to the next function who can check my movie database for anything after the last time it was called. (I'm doing this to send out push notifications for new fields manually entered into Parse class) then actually send the push. But I'm not understanding the .then and promises, I'm new to JavaScript so any help would be appreciated!
Here is my code i have now.
Parse.Cloud.job("TestSendNewMoviePush", function(request, response) {
var query = new Parse.Query("MovieStatus");
var lastRunDateQuery = new Parse.Query("LastRun");
var lastRunDate;
var newDate;
var newCount = 0;
var installQuery = new Parse.Query(Parse.Installation);
query.greaterThan("updatedAt", lastRunDate);
query.equalTo("CurrentStatus", "Ready");
query.equalTo("imageStatusName", "Green");
installQuery.equalTo("role", "downloader");
lastRunDateQuery.get("d3WeNEwzIu", {
success: function(lastDateRanObj) {
console.log("Got the object " + lastDateRanObj);
var date = new lastDateRanObj.updatedAt;
lastRunDate = lastDateRanObj.updatedAt;
console.log(lastRunDate);
return lastRunDate;
},
error: function(lastDateRanObj, error) {
console.log("Failed to get object");
}
}).then(
query.count({
success: function(count) {
newCount = count;
return newCount
},
error: function(e) {
}
})).then(
Parse.Push.send({
where: installQuery,
data: {
"alert": newCount + " new movie(s) available!",
"badge": "Increment"
}
}, {
success: function() {
response.success("Success");
},
error: function(e) {
response.error("Error:" + e.code);
}
}));
});

lastRunDateQuery.get() returns a Promise object, which you can chain with a then, which itself is a function taking 2 functions as arguments: one that is called if the promise is resolved, and one that is called if the promise is rejected. You use these instead of the success and error parameters:
lastRunDateQuery.get()
.then(function(data) {
// success!!
}, function(error) {
// error :(
});
The functions you passed as arguments to then can themselves return promises, which you may subsequently chain with a then. In the example below I have omitted the error callbacks:
lastRunDateQuery.get()
.then(function(data) {
// data is the result of lastRunDateQuery.get()
return query.count();
})
.then(function(data) {
// data is the result of query.count()
return someOtherThing.someOtherMethodReturningAPromise();
});
.then(function(data) {
// data is the result of someOtherThing.someOtherMethodReturningAPromise()
});
And so on.
I would recommend having a look at the Promises/A+ spec - it's very instructive.
EDIT:
If the chaining concept is a bit confusing just think of it as a shorthand for the following:
var aPromise = lastRunDateQuery.get();
aPromise.then(
function() {}, // promise was resolved -> call this function
function() {}, // promise was rejected -> call this function
);

Angular Service/Controller not returning promise?

so I finally got my app working to where it gets the right URL for the JSON request. However now I can't get it work with that URL.
I understand that the service is returning the promise from the Google Maps API, which I probably shouldn't do but if I leave it out I get a "Weather.getWeather is undefined" error. I don't know why.
How can I get this to work correctly. Thanks for any help.
weatherService.getWeather = function(city) {
var coordsUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + city;
return $http.get(coordsUrl)
.success(function(data) {
var coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng;
return getWeatherData(coords);
});
function getWeatherData(coords) {
var deferred = $q.defer(),
apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';
$http.jsonp(weatherUrl)
.success(function(data) {
deferred.resolve(data);
}).error(function(err) {
deferred.reject(err);
});
console.log(weatherUrl);
return deferred.promise;
}
};
Controller:
vm.fetchWeather = function(city) {
Weather.getWeather(city)
.then(function(data) {
console.log(data);
vm.place = data;
});
};

You shouldn't use .success in your getWeather service function that wouldn't allow you return any sort of data. Because callback function's are not capable of returning anything Read Here about callback & promise. So you should go for the promise recipe to dealing with asynchronous request, basically you can return data from the promise function to consumer function which calls that function. Actually it does call the consumer .then function, when ajax completed.
You need to simply use .then function in your getWeather function, then on resolve of that async call it will call the getWeatherData function which again will again returns a promise. So when it gets resolved it call .then function of getWeatherData when it returns data from it, at that time Weather.getWeather(city)'s .then function will get call. This whole thing is nothing but you implemented in promise chain. One function wait for other's, once the underlying promise gets resolved, it call its .then function.
Read here about Promise
Code
return $http.get(coordsUrl)
.then(function(resp) {
var data = resp.data
var coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng;
return getWeatherData(coords);
});
Also there is not need of creating an extra promise inside getWeatherData function as you can utilize the promise of $http call there.
Code
function getWeatherData(coords) {
var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';
return $http.jsonp(weatherUrl)
.then(function(resp) {
var data = resp.data;
//you could play with data here before returning it.
return data;
},function(error) {
return error;
});
}
Edit by Roamer-1888
Alternatively, modify getWeatherData() to accept data and to calculate coords for itself. Then, the flow control statement will simplify to return $http.get(coordsUrl).then(getWeatherData);.
weatherService.getWeather = function(city) {
var coordsUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + city;
function getWeatherData(data) {
var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng,
weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';
return $http.jsonp(weatherUrl);
}
return $http.get(coordsUrl).then(getWeatherData);
};