Develop Reference

angularjs returning rejected promises

I have some strange behaviour here....
I have a service I created to handle all API calls.
It looks like this:
angular.module('widget.data').service('apiHandler', apiHandler);
apiHandler.$inject = ['$http', 'SimpleCache', 'apiUrl', 'ngNotify'];
function apiHandler($http, simpleCache, apiUrl, ngNotify) {
return {
url: apiUrl,
get: get,
post: post,
put: put,
delete: requestDelete
};
//////////////////////////////////////////////////
// GET
function get(url, params) {
return buildRequest(url, 'GET', null, params);
};
// POST
function post(url, data) {
return buildRequest(url, 'POST', data);
};
// PUT
function put(url, data) {
return buildRequest(url, 'PUT', data);
};
// DELETE
function requestDelete(url, params) {
return buildRequest(url, 'DELETE', null, params);
};
// Private function to build our request
function buildRequest(url, method, data, params) {
//console.log(url);
// Create our apiPath
var apiPath = url.indexOf('http') > -1 ? url : apiUrl + url;
// Create the model
var model = {
method: method,
url: apiPath,
data: data,
params: params,
cache: simpleCache
};
// If we are performing an update/create or delete call
if (method !== 'GET') {
// Remove from our cache
simpleCache.remove(apiUrl + url);
}
// Build our request
return $http(model).then(function (response) {
// Return our response
return response.data;
// If we have an error
}, function (response) {
console.log(response.data.exceptionMessage);
// Display our error
ngNotify.set(response.data.exceptionMessage, { type: 'error' });
// Return our error
return response;
});
};
};
You can see in buildMessage it returns the call, response and error response. So I would expect that if there was an error, any service that has this injected into it would also fire the error callback.
But it doesn't.
I have this service:
angular.module('widget.directives').service('pkAuthenticateService', pkAuthenticateService);
pkAuthenticateService.$inject = ['apiHandler'];
function pkAuthenticateService(apiHandler) {
return {
register: register
};
//////////////////////////////////////////////////
function register(model) {
return apiHandler.post('users/create', model).then(function (response) {
console.log('success', response);
return response;
}, function (response) {
console.log('error', response);
return response;
});
};
};
But the message I get in the console is the success message and not the error.
Can someone explain to me why? Or help me get it working as I would expect (i.e. if it fails in the parent service, then it should fail all the way down).

It's one of the most interesting & confusing cases in JS promises - "swallowing" of errors. Consider following case:
var x = new Promise((result,reject)=>{
reject('something bad')
})
x.then(()=>{
console.log('wow')
return 'a';
},()=>{
console.log('ops')
return 'a';
}).then(()=>{
console.log('I\'m baaack')
return 'a';
},()=>{
console.log('still bad?')
return 'a';
})
It might be counterintuitive, but inside 2nd then() 'I\'m baaack' will be printed because you have already caught & handled error. So, if you're handling error, either with 2'nd parameter of then() or with some "catch", you need to throw an error or return something rejected to pass error further down.
In your case, it can be done without $q, just replace 1 line:
// If we have an error
}, function (response) {
console.log(response.data.exceptionMessage);
// Display our error
ngNotify.set(response.data.exceptionMessage, { type: 'error' });
// Return our error
throw response;
});

The catch function returns a resolved promise not a rejected promise:
The Promise returned by catch() is rejected if onRejected throws an error or
returns a Promise which is itself rejected; otherwise, it is resolved.
In order for the rejected promise to percolate through to the outer function (or to "fail all the way down" as you say), you need to return it as a rejected promise:
return $http(model).then(function (response) {
...
}, function (response) {
...
// Return our error
return $q.reject(response);
});

Inject the $q service of angular for managing promises.
Then create a deferral from $q and perform your request. Inside the result of your request, resolve or reject the promise providing the data. Then return the deferred object.
So changing your service in this way should work:
angular.module('widget.data').service('apiHandler', apiHandler);
apiHandler.$inject = ['$http', 'SimpleCache', 'apiUrl', 'ngNotify', '$q'];
function apiHandler($http, simpleCache, apiUrl, ngNotify, $q) {
return {
url: apiUrl,
get: get,
post: post,
put: put,
delete: requestDelete
};
//////////////////////////////////////////////////
// GET
function get(url, params) {
return buildRequest(url, 'GET', null, params);
};
// POST
function post(url, data) {
return buildRequest(url, 'POST', data);
};
// PUT
function put(url, data) {
return buildRequest(url, 'PUT', data);
};
// DELETE
function requestDelete(url, params) {
return buildRequest(url, 'DELETE', null, params);
};
// Private function to build our request
function buildRequest(url, method, data, params) {
//console.log(url);
// Create our apiPath
var apiPath = url.indexOf('http') > -1 ? url : apiUrl + url;
// Create the model
var model = {
method: method,
url: apiPath,
data: data,
params: params,
cache: simpleCache
};
// If we are performing an update/create or delete call
if (method !== 'GET') {
// Remove from our cache
simpleCache.remove(apiUrl + url);
}
var deferred = $q.defer();
$http(model).then(function (response) {
// Return our response
$q.resolve(response.data);
// If we have an error
}, function (response) {
console.log(response.data.exceptionMessage);
// Display our error
ngNotify.set(response.data.exceptionMessage, { type: 'error' });
// Return our error
$q.reject(response);
});
return deferred;
};
};

Angularjs FB login using factory

I am new to angularjs.I am using factories where i have written the fb login code.
And during the last step i am sending all the data to my server where the user is registered in my database and the token is sent.
Here is the code.
'use strict'
APP.factory('authenticationFactory',['ENV','$http','$rootScope', function (ENV,$http,$rootScope) {
return {
socialLogin:function(data){
return $http.post($rootScope.apiURL+'sociallogin',data).then(function (resp) {
if(resp.status == 200) {
return resp.data;
}
})
},
fbLogin: function () {
var FB = window.FB;
var scopes = 'public_profile,email';
var that = this;
FB.login(function (response) {
return that.facebookStatusChangeCallback(response);
}, {scope: scopes});
},
facebookStatusChangeCallback: function(response){
if (response.status === 'connected') {
// Logged into your app and Facebook.
var r = this.facebookApiRequest(response);
console.log(r);
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
console.log('Please log into this app.');
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
console.log('Please log into Facebook.');
}
},
facebookApiRequest: function (authResponse) {
var that = this;
var r = FB.api('/me?fields=id,name,email,gender,first_name,last_name,age_range,link,birthday', function (response) {
var r = FB.api("/" + response.id + "/picture?height=720", function (pictureResponse) {
if (pictureResponse && !pictureResponse.error) {
/* handle the result */
response.profile_pic = pictureResponse.data.url;
response.access_token = authResponse.authResponse.accessToken;
response.provider = 'facebook';
response.devicetoken = '';
response.full_name = response.first_name+' '+response.last_name;
var r = that.socialPluginLogin(response).then(function (resp) {
return that.resp;
});
return r;
} else {
console.log('error while fatching fb pic');
}
});
console.log(r);
});
console.log(that);
},
socialPluginLogin : function (data) {
var resp = this.socialLogin(data).then(function (resp) {
return resp;
});
return resp;
}
};
}]);
I am calling the fbLogin() function from my controller. i need the response from the function socialLogin() so that i can change the state.
Where am i going wrong.??

The answer was pointing in the wrong direction, another try:
Your function fbLogin should return a promise, which can be resolved by socialLogin later. Since fbLogin doesn't return a thing, you don't receive any signal from the completed login.
See this:
// We add $q here
APP.factory('authenticationFactory',['ENV','$http','$rootScope','$q', function (ENV,$http,$rootScope,$q) {
var loginPromise;
return {
socialLogin:function(data){
return $http.post($rootScope.apiURL+'sociallogin',data).then(function (resp) {
if(resp.status == 200) {
// This is your connection to the controller
loginPromise.resolve(resp.data);
return resp.data;
}
})
},
fbLogin: function () {
var FB = window.FB;
var scopes = 'public_profile,email';
var that = this;
FB.login(function (response) {
return that.facebookStatusChangeCallback(response);
}, {scope: scopes});
// Create and return a promise
loginPromise = $q.defer();
// EDIT: My fault, return the promise:
return loginPromise.promise;
},
//...
And add this to the controller:
authenticationFactory.fbLogin().then(function(data){
// Check it out:
console.dir(data);
})
Additional things you should consider:
Define your functions in the function body, not in the return statement. You can eliminate that=this this way
Only return the API, not all the functions
Read up on promises, they are the way to go in the angular world. You might as well use callbacks, but those are tedious to handle.

Change your socialLogin function to below, your function would return a promise object which you can consume in socialPluginLogin via then which you are already doing.
socialLogin:function(data){
return $http.post($rootScope.apiURL+'sociallogin',data)
},

Binding a service response in Angular JS

I am trying to send the http response as a JSON body to an error handler if an error occurs. I am not really sure how to do this as I am a little inexperienced in this area. Here is the relevant code that I have currently:
Controller:
for (var prop in $scope.applicants) {
var applicant = $scope.applicants[prop];
$scope.sendApplicantsToSR(applicant).then(null, $scope.sendATSError.bind(null, applicant));
}
$scope.sendATSError = function (applicant, error) {
return AtsintegrationsService.applicantErrorHandling(applicant.dataset.atsApplicantID);
};
$scope.sendApplicantsToSR = function(applicant) {
return AtsintegrationsService.sendApplicantsToSR(applicant);
};
Service:
srvc.sendApplicantsToSR = function (applicant) {
var applicantURL = {snip};
return $http({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
url: applicantURL,
data: applicant
});
};
srvc.applicantErrorHandling = function (applicantID, error) {
var url = srvc.url + {snip};
return $http({
method: 'POST',
url: url,
data: { "error_message": error }
});
};
So, ideally, I would like to pass the result of $scope.sendApplicantsToSR to $scope.sendATSError only when an error occurs.

Inside your controller
YourService.getdatafromservice().then(function(SDetails) {
//response from service
console.log(SDetails);
});
Inside your service
return {
getData: getData
};
function getData() {
var req = $http.post('get_school_data.php', {
id: 'id_value',
});
return req.then(handleSuccess, handleError);
function handleSuccess(response) {
response_data = response.data;
return response_data;
}
function handleError(response) {
console.log("Request Err: ");
}
}

Angularjs - Abort/cancel running $http calls

I've got a call using Resource in angularjs but i get some problems because i can't abort every calls it does. This kind of structure i use for an autocomplete.. is it possible convert from resource call to http? This is the code
var Resource = $resource(URL, {},{ getAutocompleteResults: { method: "GET", params: {text: ""} }});
var locked = false;
function getMoreData() {
if(locked)
return;
locked = true;
Resource.autoCompleteResults()
.$promise.then(function(data) {
$scope.autocompleteViewResults = data;
locked = false;
});
}
This is what i've tried so far with no success.
$scope.autocompleteViewResults = function () {
$http
.get(URL, {
params: {
text = ""
}
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};
Or if someone knows an alternative method..

The $scope.autocompleteViewResults variable is being assigned 2 times.
Try this:
$scope.autocompleteViewResults = {};
$scope.getResults = function(valueAsTyped) {
$http
.get(URL, {
params: {
text: valueAsTyped
}
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};
Update
If you need to cancel old requests.
var promiseCanceller = $q.defer();
$scope.autocompleteViewResults = {};
$scope.getResults = function(valueAsTyped) {
promiseCanceller.resolve('request cancelled'); // cancel currently running request
$http
.get(URL, {
params: {
text: valueAsTyped
},
timeout: promiseCanceller.promise // pass promiseCanceller as the timeout
})
.success(function (data) {
$scope.autocompleteViewResults = data;
});
};

Then appears to fire before async returns value

I am getting an error almost like my .then is firing before my async call is finished. I realize I am looping for the api post, but i am currently only trying it with an array size of 1.
Service:
this.saveTags = function (tag) {
$http({
method: "POST",
url: '/api/projects/' + data.Id + '/tags',
data: ({ Name: tag.Name })
}).then(function (response) {
console.log(response.data)
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function (response) {
// something went wrong
return $q.reject(response.data);
});
Controller:
tags.forEach(function(tag) {
counter++;
data.saveTags(tag).then(function(data) {
console.log(data)
});
});
Error:

You need to return a promise from the function that is resolved or rejected when the $http POST request is finished.
It looks like instead you're trying to return the reject and resolve products from the $http function itself, while your saveTags function ends up returning nothing to its caller (ie. from your forEach loop).
Try this:
this.saveTags = function (tag) {
var deferred = $q.defer();
$http({
method: "POST",
url: '/api/projects/' + data.Id + '/tags',
data: ({ Name: tag.Name })
}).then(function (response) {
console.log(response.data)
if (typeof response.data === 'object') {
deferred.resolve(response.data);
} else {
// invalid response
deferred.reject(response.data)
}
}, function (response) {
// something went wrong
deferred.reject(response.data)
});
return deferred.promise;
}