Looking at this AuthInterceptor from this helpful answer, how are the request and response key's used in the returned JSON object?
Also, what's the meaning of return config || $q.when(config)? I understand that the second part is returned if config is null or undefined, but what does $q.when(config) mean in this code?
myApp.factory('AuthInterceptor', function ($window, $q) {
return {
'request': function(config) {
config.headers = config.headers || {};
if ($window.sessionStorage.getItem('token')) {
config.headers.Authorization = $window.sessionStorage.getItem('token');
}
return config || $q.when(config);
},
'response': function(response) {
if(response.status === 401) {
$location('/login');
}
return response || $q.when(response);
}
};
});
I typed out the above linked answer. It worked for me, but I don't understand how it's used.
When registering an $http interceptor, you should essentially pass an object with the following (optional) keys: request, requestError, response, responseError.
For more info on when each interceptor function is called, take a look at this answer.
$q.when() turns any JS object into a promise (that resolved immediatelly with the passed in object as each resolved value). But, frankly (although I've seen it a lot) I don't understand why one would need to return config || $q.when(config), instead of just config.
request and response are simple used as intermediaries. In other words, the request function is run prior to a request (after requesting), and the response function is run prior to handling a request result.
$q.when() ensures that the return value is able to be handled as a promise. Essentially it wraps the value in a promise, so that functions like returnedValue.then() work.
See: https://docs.angularjs.org/api/ng/service/$q
Kevin asked why you would want to use $q.when(). This is to ensure that any outside function that consumes this one receives a promise, if it is expecting one. For example, imagine the situation where you call a function expecting a promise:
someThirdPartyFunc(someArg).then(function(result){
// do somethign with result
});
If you ran this and someThirdPartyFunc returned a simple value (say 100), then this would obviously fail. If the implementor wrapped the return value in $q.when(100), then the function call above would be valid, and result would contain the value 100.
Related
I have a need to have a variable that is unique per request inside my http interceptor. So when the request comes in I want to set this variable to some value and read that value on the response. The issue is that the interceptors are shared so every time a new request comes in my variable will just be overridden.
angular.module('app').factory('httpInterceptor', ['$q',
function($q) {
var myInstanceVar = "";
return {
request: function (config) {
myInstanceVar = Math.random();
return config;
},
response: function (response) {
console.log(myInstanceVar);
return response || $q.when(response);
}
}
}
]);
So in this example, I would want myInstanceVar to be unique when I output the value in response but instead it just outputs the value that was generated the last request. So if I have 3 requests the output would be 3,3,3 instead of like 5,9,3 since the last request set it to 3.
I know I could probably just append the value to the request body and have the server return it back but I want to avoid that if possible.
I am using AngularJS 1.6.4 if that matters.
You can store the variable in the config, and get it back in response.config.
I have this code:
dogsResource.delete({id: $stateParams.dogId}, angular.noop,
function(value, responseHeaders){
//Success
console.log(value);
console.log(responseHeaders);
},
function(httpResponse){
//Error
console.log(httpResponse);
}
);
The delete is done, the problem is that neither success nor error is being called. I've also tried using an instance (that means, to use $delete), but it didnt work either.
I tried testing the callbacks with other methods, such as get
$scope.dog = dogsResource.get({id: $stateParams.dogId}, function(value, res){
console.log(value);
});
And it works. I don't know why that happen, since the dog is being deleted from database.
Thanks
UPDATE
dogResource code
// Return the dogs resource
.factory('dogsResource', ['$resource', function($resource){
return $resource("http://localhost:5000/dogs/:id",{id: "#id"},{update: {method: "PUT"}});
}])
UPDATE 2
I Found the error. It was in the RESTful API (Node js). The method was not sending anything to Angular, so no callback was triggered:
//DELETE - Delete a dog with specified ID
exports.deleteDog = function(req, res) {
console.log('DELETE' + req.params.id);
Dog.findById(req.params.id, function(err, dog) {
dog.remove(function(err) {
if(err) return res.status(500).send(err.message);
console.log('Succesfully deleted.');
res.status(200);
})
});
};
Replacing res.status(200) with res.status(200).end() got the callback triggered.
Thanks you all for your time.
I suggest to you to not use
res.status(200).end()
In fact usually when you delete an object with a REST service in expressJS, the common case is to send the deleted object as response, because it could be useful for the frontend to get this object (and to make sure that it's the good object).
So instead of use
res.status(200).end()
use
res.send(dog)
Or if you want to send an empty response, the status code for a delete operation should be :
res.status(204).end()
204 NO CONTENT
Note that you don't need to set the status code by default it will be 200. So set status code to 200 is just useless.
And to finish an http response needs to be sent to close the request. The end method or the send method make that. Set a status code to a response http will never send anything to the frontend. That's why your angular callback was never fired.
So i suggest to you to add the tag expressjs to your question, because it's not an AngularJS problem but a real expressJS mistake.
In your code, the second argument is angular.noop:
dogsResource.delete({id: $stateParams.dogId}, angular.noop,
function(value, responseHeaders){
//Success
console.log(value);
console.log(responseHeaders);
},
function(httpResponse){
//Error
console.log(httpResponse);
}
);
According to the ngResource Source Code, if you set the second argument to a function (angular.noop is a function) then it will use the second argument as the success callback. Since the second argument is a no-operation, nothing will happen when it is called.
Try setting the second argument to function (r) { console.log (r) } and see what you get.
I'm recently working with ngResource. In my case, I've have used three parameters in that api call. Therefore, you could use
dogsResource.delete({id: $stateParams.dogId}, function(value, responseHeaders){
//Success
console.log(value);
console.log(responseHeaders);
},
function(httpResponse){
//Error
console.log(httpResponse);
}
);
I hope that helps.
Use promise return by the $resource object. As $resource object by default return a promise object, and that promise object is available .$promise variable over that $resource API method.
Code
dogsResource.delete({id: $stateParams.dogId}).$promise.then(function(data)//Success
console.log(value);
},
function(httpResponse){ //Error
console.log(httpResponse);
});
How is result passed from the $http object to the unnamed function that is executed on success?
$http
.success(function (result) {
...
})
I know that the result is passed via any variable name that i put into the function. It is typically called result. But how is this done? It seems like wizardry to me.
I would expect to have to write something like:
$http
.success(function (result=$http.result) {
...
})
You have to study how both Javascript Function Paramters and Promises work.
The code that you pasted comes, I Think, from some AngularJS Application.
If my assumption is correct, $http is a service and doesn't have anyone success method.
The success method is present on $http methods:
//get, post, ecc...
$http.get(...).success()
By the way:
Javascript doesn't provide any way to match parameters, their order is always the order provided by the callee and the names that you use is just for you (Don't confuse with the IOC that the DependencyInjection in AngularJS does). EXAMPLE 1
function loggerCase1(log1, log2, log3, log4) {
console.log('loggerCase1 => param-1:', log1);
console.log('loggerCase1 => param-2:', log2);
console.log('loggerCase1 => param-3:', log3);
console.log('loggerCase1 => param-4:', log4);
console.log('---------------------');
};
function loggerCase2(log4, log2, log1, log3) {
console.log('loggerCase2 => param-1:', log4);
console.log('loggerCase2 => param-2:', log2);
console.log('loggerCase2 => param-3:', log1);
console.log('loggerCase2 => param-4:', log3);
console.log('---------------------');
};
function loggerCaseN() {
for(var i = 0; i < arguments.length; i++) {
console.log('loggerCaseN => param-' + (i + 1) + ': ', arguments[i]);
}
console.log('---------------------');
};
var logs = ['log1', 'log2', 'log3', 'log4'];
loggerCase1.apply(this, logs);
loggerCase2.apply(this, logs);
loggerCaseN.apply(this, logs);
If it's all clear about function parameters behaviour in javascript... you will know that isn't possibile to say give me the first as the second or something like that, also, the example that you pasted seems similar to default parameters (implemented in ES6, aka Javascript Harmony).
Let's go to the point 2:
In a simple promise chain (find on google or see the link above) you can pass a result to the next callback using return. EXAMPLE2
angular
.module('promisechainging', [])
.run(function($q) {
$q
.when('Hello World')
.then(function(greetings) {
console.log('ring 1', greetings);
return greetings;
})
.then(function(salut) {
console.log('ring 2', salut);
return salut;
})
.then(function(ciao) {
console.log('ring 3', ciao);
return { message: ciao };
})
.then(function(result) {
console.log('ring 4', result.message);
return result;
})
.catch(function(error) {
console.log('THIS LOG NEVER HAPPENS BECAUSE THERE AREN\'T REJECTED PROMISES');
return $q.reject(error);
})
.finally(function() {
console.log('We Are At The END');
})
;
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="promisechainging"></div>
Basically is not important how parameters are named!
Angular is using the promise mechanism which basically returns an object that let you know when the result is available or an error has been thrown.
When the ajax call returns, angular is calling the promise and providing the result as a parameter.
It's just like calling a regular function.
$http allows you to perform async network operations and returns a promise object (you can read more about promises in Angular here).
The success and error methods were used to declare callbacks to what happens when the promise is resolved (when the request was successfully completed) or rejected (when there was an error at processing the request). I used the past tense since they are now deprecated and the desired way to handle these is using the then method of the promise object.
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Basically, the syntax is pretty much the same - the successCallbackFunction has the same signature as the method you were passing in the success method of your example.
But this is only the method signature. Your callback function parameters can be called however you want (result, data etc). All you have to keep in mind is that the first parameter in your callback function is going to be the data returned by your request.
$http
.success(function (result) {
...
})
$http will return a Promise Object which is nothing but a Javascript Object with success and different other functions.
So the statement immediately becomes like below as $http is evaluated,
(Promise Object)
.success(function (result) {
...
})
The success function of promise will save this anonymous function to be called once the promise is resolved. We can manually resolve promises, but I guess http will do this for you here.
Once http request(AJAX) is successful angular will tell this Promise object to run this success function by resolving the Promise, somewhat like:
suceess: function(responseData){ //success of AJAX
resolve(responseData); //this will pass the result to promise
}
Once resolve is called promise object has the result with it, it will then call the success function you passed initially with this value of result.
PS: This is a rough idea, I ave to look into Angular source to see their actual implementation.
Javascript functions are also class objects.
When $http completes it will call either the success or fail function - they are objects so they can be passed around. When it does, it will provide the parameters.
How do I reject or fail a successful $http.get() promise? When I receive the data, I run a validator against it and if the data doesn't have required properties I want to reject the request. I know I can do after the promise is resolved, but it seems like a good idea to intercept errors as soon as possible.
I'm familiar with the benefits of $q, but really want to continue using $http.
You can reject any promise by returning $q.reject("reason") to the next chained .then.
Same with $http, which returns a promise - this could be as follows:
return $http.get("data.json").then(function(response){
if (response.data === "something I don't like") {
return $q.reject("bad data");
}
return response.data;
}
This could simply be done within a service, which pre-handles the response with the .then as specified above, and returns some data - or a rejection.
If you want to do this at an app-level, you could use $http interceptors - this is just a service that provides functions to handle $http requests and responses, and allows you to intercept a response and return either a response - same or modified - or a promise of the response, including a rejection.
.factory("fooInterceptor", function($q){
return {
response: function(response){
if (response.data === "something I don't like") {
return $q.reject("bad data");
}
return response;
}
}
});
Same idea as above - except, at a different level.
Note, that to register an interceptor, you need to do this within a .config:
$httpProvider.interceptors.push("fooInterceptor");
You can use AngularJS interceptors. But you still need to use $q in them because $http uses $q.
Here is a useful article about interceptors.
When should I use then() method and what is the difference between then(), success(), error() methods ?
Other than the success un-wraps the response into four properties in callback, where as then does not. There is subtle difference between the two.
The then function returns a promise that is resolved by the return values for it's success and error callbacks.
The success and error too return a promise but it is always resolved with the return data of $http call itself. This is how the implementation for success in angular source looks like:
promise.success = function(fn) {
promise.then(function(response) {
fn(response.data, response.status, response.headers, config);
});
return promise;
};
To understand how it can affect our implementation, consider an example where we retrieve whether user exists based on email id. The http implementation below tries to retrieve the user based on userid.
$scope.userExists= $http.get('/users?email='test#abc.com'')
.then(function(response) {
if(response.data) return true; //data is the data returned from server
else return false;
});
The promise assigned to userExists resolves to either true or false;
Whereas if we use success
$scope.userExists= $http.get('/users?email='test#abc.com'')
.success(function(data) { //data is the response user data from server.
if(data) return true; // These statements have no affect.
else return false;
});
The promise assigned to userExists resolves either a user object or null, because success returns the original $http.get promise.
Bottom line is use then if you want to do some type of promise chaining.
then() method fires in both the success and failure cases. The then() method takes two arguments a success and an error callback which will be called with a response object.