I'm trying to do different actions when getting 409 response from the server on a resource's method.
Basically I have the same problem as in AngularJS service not invoking error callback on save() method, I've tried all the answers but I always get the success callback.
$scope.form.$save(function (data, headers) {
console.log(data, headers);
}, function(error) {
console.log('fail');
});
Can anyone give a definitive answer if this is fixed, and if / what I do wrong?
Turned out I had an custom debug-interceptor that didn't explicitly return a $q.reject(response).
Apparently every custom debug-interceptor completely overwrites the default behavior.
See https://github.com/angular/angular.js/issues/2609#issuecomment-44452795 for where I found the answer.
Related
I’m trying to implement authentication in my angularjs app.
I’ve read some articles about doing this properly. Here is one, for instance: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
But I can’t realize how to make it respond on wrong username/password pair.
Let’s have a look at this code :
authService.login = function (credentials) {
return $http
.post('/login', credentials)
.then(function (res) {
// populate user info
}
);
};
I’ve tried to add here a second callback to “then” method and use “success”/”error” methods instead of “then” and I’ve tried to response on $http.post request with different error like 400 and 500 via status, but in any case all the errors are handled by the success method and callback.
What am I doing wrong? How to catch wrong password/username response in angular?
It was actually my own fault. My custom Intereptor simply swallowed authenticaion errors.
I'm having some trouble with error handling in a little angularjs application. I'm interacting with a Flask backend and a Postgres DB.
I have a factory service
appointServices.factory('Appointments', ['$resource', function($resource){
return $resource(someUrl, {}, {
query: { ... }
,
create: {
method: 'POST'
,url: 'http://somedomain:port/new/:name/:start/:end/:treatment'
,params: { start: '#start', end: '#end', name: '#name', treatment: '#treatment' }
,isArray:false
}
});
}
]);
Inside a controller I'm making the following call
Appointments.create($scope.appointment, function(value, responseHeaders) {
// success handler
console.debug('success: ', JSON.stringify(value));
}, function(httpResponse) {
// error handler
console.debug('error: ', JSON.stringify(httpResponse));
});
Here $scope.appointment contains the relevant parameters for the create action.
Now, in the backend I'm able to catch DB errors involving constraints and I'm trying to return an error code with a 'meaningful' message. So I have a python method
def create(name, start, end, treatment):
try:
...
transaction_status = 'ok'
code = 200
except IntegrityError as e:
...
transaction_status = 'IntegrityError'
code = 500
finally:
...
return make_response(transaction_status, code)
Everything works fine, I'm able to talk to the backend, create new data and insert this in the DB. As I said, any violation of the constraints is detected and the backend responds
curl -X POST "http://somedomain:port/new/foo/bar/baz/qux" -v
...
< HTTP/1.0 500 INTERNAL SERVER ERROR
...
IntegrityError
So, the problem is, no matter whether the action create was successful or not, the intended error handler specified inside the controller is always fired. Moreover, I always end up with a status code 404 in the httpResponse. Firebug shows correctly the code 500 as above, though.
Anybody has any idea of why I'm getting this behavior?
Any suggestions on how to improve the error handling mechanism are also welcome.
Thx in advance.
P.S. Following the documentation on $resource I have also tried variations on the factory service call, e.g.
Appointments.create({}, $scope.appointment, successCallback, errorCallback);
Appointments.create($scope.appointment, {}, successCallback, errorCallback);
with the same results.
Update:
Forgot to mention the important fact that I'm interacting with the backend via CORS requests. The POST request in create above is having place with the OPTIONS method instead. As I mentioned everything is working correctly except for the error response.
Under further investigation, I tried to isolate the factory service, in case I did something wrong, and I also tried the approach shown in the credit card example ($resource docs), but with no positive result.
However, I came up with two workarounds. Firstly, I was able to create a plain JQuery POST request, as in the example shown in the docs. This time, the request is not replaced by OPTIONS and I got the error code correctly.
I also managed to connect to the backend with the low-level $http service as follows:
var urlBase = 'http://somedomain:port/new/:name/:start/:end/:treatment';
var url = urlBase.replace(/:name/g, $scope.appointment.name);
url = url.replace(/:start/g, $scope.appointment.start);
url = url.replace(/:end/g, $scope.appointment.end);
url = url.replace(/:treatment/g, $scope.appointment.treatment);
// force method to be POST
var futureResponse = $http({ method: 'POST', url: url });
futureResponse.success(function (data, status, headers, config) {
console.debug('success: ', JSON.stringify(data));
});
futureResponse.error(function (data, status, headers, config) {
console.group('Error');
console.debug(JSON.stringify(status));
console.debug(JSON.stringify(data));
console.groupEnd();
});
This time, as in the case of JQuery, the request is done effectively with POST and error codes are correctly received.
Notice also that I'm not calling $http.post but I set the method to POST as part of the object parameter to $http, otherwise the connection takes places with OPTIONS as before.
Still trying to figure out what is happening with $resource.
in AngularJs 1.2.x, the docs only provide a rejection object, how can we see the actual response object? (to see things like http status code)
edit: here's an example from the docs:
// register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
return {
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
};
});
that example shows some unknown rejection object (no docs on what it's members are). the old (deprecated responseInterceptors allow query of the response object. (check for status=401, for example) how are you supposed to query for 401 service errors with the new interceptor functionality?
i am coding my usage of this to the point of being able to run it,
and so i set a breakpoint, and see that the "rejection" object has a .status property.
if a server doesn't exist, it will == 0
otherwise, it seems to return the http status code. (i see 404 so far)
I havent coded a real service point so i'll update this answer and/or accept it once i get that done.
update: yes, the .status field returns the http response status, and 0 if server not found. so this is the valid answer!
I'm trying to delete a model on my backend and what I do is this (the code is adapted just to show you the issue, some parts could be missing):
attending= new Backbone.Model();
attending.url= this.url() + "/reject";
attending.set({
id: this.id
})
attending.destroy({
success: function(){
alert("yes");
},
error: function(){
alert("no");
}
});
but what I always obtain is a "no" alert. The fact is the backend seems to be updated correctly and what I obtain as a response too. Here it is:
so... what's wrong with the response I get? Why doesn't backbone recognizes it as a successful response? I get 200/OK and a "application/json" format as well!
Your backend should return something with 200
jQuery expect 200 with application/json to have some content
Have a look here: https://github.com/jashkenas/backbone/issues/2218#issuecomment-20991938
You might want to place a "debugger;" in the error callback and trace exactly why its coming that route vs the success route. That should atleast get your started on the right path...
Pretty new to AngularJS and got a mock $httpBackend working as described in the docs (see here:http://docs.angularjs.org/api/ngMockE2E.$httpBackend). I can reproduce the GET code e.g.:
$httpBackend.whenGET('/phones').respond(phones);
The POST, method, however, fails with an angular-mocks.js error. This is what I specify to happen on POST:
$httpBackend.whenPOST('/phones').respond(function(method,url,data){
console.log(data);
phones.push(angular.fromJson(data));
});
This is how I call the POST from the controller:
var newPhone = {name:'New Phone'};
$http.post('/forecasts/types.json', newPhone);
And this is what I see in the console in response:
{"name":"New Phone"} app.js:167
Uncaught TypeError: Cannot read property '2' of undefined angular-mocks.js:876
(anonymous function) angular-mocks.js:876
completeOutstandingRequest angular.js:2930
(anonymous function) angular.js:3209
My code looks pretty much the same as the docs. The function is called when POSTed to but I can't figure out why it won't run.
Edit (thanks to Josh David Miller for his comment re a fiddle) Here is a fiddle that reproduces the error: http://jsfiddle.net/elcabo/btbds/3/
The fiddle is based on the example in the Angular docs (http://docs.angularjs.org/api/ngMockE2E.$httpBackend) and the angular fiddle for mockE2E $httpBackend (http://jsfiddle.net/vojtajina/DQHdk/)
Has anyone encountered this before or have any ideas on how to attack this?
I've searched pretty wide for a solution/relevant posts but can't find any, so any pointers would be greatly appreciated.
Many thanks.
I updated your jsFiddle, which now works: http://jsfiddle.net/joshdmiller/EgMpe/.
First, the version of AngularJS was extraordinarily old. I updated it from 0.10.6 to 1.0.3. With that change came many syntactic changes, which you can find in the fiddle.
But the issue you were having was from not returning a value in your $httpBackend.whenPOST method. The respond method is expected to return a value indicating the status, response body, and headers. The verbose example I included in the working fiddle is:
$httpBackend.whenPOST('/phones').respond(function(method, url, data, headers){
console.log('Received these data:', method, url, data, headers);
phones.push(angular.fromJson(data));
return [200, {}, {}];
});
The array returned is a response status of 200, an empty response body, and an empty set of headers (i.e. use the defaults).
I also added a whenGET so you can see them working together:
$httpBackend.whenGET('/phones').respond(function(method,url,data) {
console.log("Getting phones");
return [200, phones, {}];
});