I have code like this. But thats return OLD token, although my server has NEW token.
function stores() {
return $http.get(URL + 'stores').then(function(response){
console.log(response.config.headers.Authorization);
});
}
This code below return NEW token, as my server last generate. This is what i want.
function stores() {
return $http.get(URL + 'stores').success(function(data, status, headers, config){
console.log(headers('Authorization'));
});
}
The question is, how can i do this with .then method ? i look at $http doc, they said .success will depreceate
Your problem is in the way you're accessing the headers. The response object has the following properties (from Angular docs):
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
Access the headers like this:
function stores() {
return $http.get(URL + 'stores').then(function(response){
console.log(response.headers('Authorization'));
});
}
In pretty sure it because .then needs two call back function. One success and one error. Like so:
$http.get( URL + 'stores').then(function(res){
$scope.var = res.data;
},function(){})
Related
Sorry this may be a dumb question but it isn't obvious to me:
function login(email, password){
return $http.post('/api/v1/login/', {
email: email,
password: password
}).then(loginSuccessFn, loginErrorfn);
function loginSuccessFn(data, status, headers, config){
Authentication.setAuthenticatedAccount(data.data);
window.location = '/'
}
function loginErrorFn(data, status, headers, config) {
console.error('Failed');
console.log(data)
}
}
This is a snippet from a tutorial I'm doing, If I need to post more I will.
In the line function loginSuccessFn(data, status, headers, config) where is the function getting the data, status, headers, and config values from? console.log(data) works, I'm just not sure where 'data' is being used anywhere else
Short answer:
Those are properties of response object of returned promise from your http call.
Details:
HTTP request returns a promise that contains a response object. The response object not only contains the properties that you mentioned in your question but according to the angular documentation also has statusText and xhrStatus properties. Below you can find expalanation of each property copied from the angular documentation.
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
xhrStatus – {string} – Status of the XMLHttpRequest (complete, error, timeout or abort).
You can find more information about this subject in the following page.
https://docs.angularjs.org/api/ng/service/$http
I have this API call, but I don't receive the data in my successCallback in the same order as I send it.
for (var i = 0; i < data.length; i++) {
$http.post('/api/bla/blabla', $.param(data[i]))
.then(successCallback, errorCallback);
}
var successCallback = function (response) {
/*
receive data in random order.
assume its being send / handled so fast, thats its random
which gets done first.
*/
};
Can I somehow wait for all data to be received, and then reorder it to the original ordering? or is there another solution.
Use $q.all to get all the data in the right order.
var promiseArray = [];
for (var i = 0; i < data.length; i++) {
var dataPromise = $http.post('/api/bla/blabla', $httpParamSerializer(data[i]))
.then (function (response) {
//return data for chaining
return response.data;
})
;
promiseArray.push(dataPromise);
}
$q.all(promiseArray).then(function (dataArray) {
//dataArray will be in original order
//process results here
}).catch (function (errorResponse) {
//log error
});
The promiseArray will be created in the correct order. Even though the individual XHR POST requests may not be served in the original order, the $q service will track the promises and fill the data array in the correct order (or resolve rejected on the first error).
The DEMO on JSFiddle.
As Groben says, you could create an array of the promises for each request, and then you can use the "when" callback to execute when all are completed.
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
you can try these
note the The response object has these properties:
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
And these too can also work depending on the API you working on...
This question already has answers here:
Why are AngularJS $http success/error methods deprecated? Removed from v1.6?
(2 answers)
Closed 4 years ago.
As the success() and error() functions are deprecated in AngularJS, I am updating my codes, replacing them with then(). Now according to my understanding, these two pieces of codes should behave identically:
$http
.get(/* some params */)
.success(function() {
// success cases here
})
.error(function() {
// error cases here
});
And
$http
.get(/* some params */)
.then(function() {
// success cases here
}, function() {
// error cases here
});
But in some cases I am getting different behavior. Can you please explain to me why would that happen, and more importantly, what would be the way to guarantee the identical behavior using then() functions?
The .success and .error methods ignore return values.
Consequently they are not suitable for chaining.
var httpPromise = $http
.get(/* some params */)
.success(function onSuccess(data, status, headers, config) {
var modifiedData = doModify(data);
//return value ignored
return modifiedData;
})
.error(function onError(data, status, headers, config) {
// error cases here
});
httpPromise.then(function onFullfilled(response) {
//chained data lost
//instead there is a response object
console.log(response.data); //original data
console.log(response.status); //original status
});
On the otherhand, the .then and .catch methods return a derived promise suitable for chaining from returned (or throw) values or from a new promise.
var derivedPromise = $http
.get(/* some params */)
.then(function onFulfilled(response) {
console.log(response.data); //original data
console.log(response.status); //original status
var modifiedData = doModify(response.data);
//return a value for chaining
return modifiedData;
})
.catch(function onRejected(response) {
// error cases here
});
derivedPromise.then(function onFullfilled(modifiedData) {
//data from chaining
console.log(modifiedData);
});
Response Object vs Four Arguments
Also notice that the $http service provides four arguments (data, status, headers, config) when it invokes the function provided to the .success and .error methods.
The $q service only provides one argument (response) to the functions provided to the .then or .catch methods. In the case of promises created by the $http service the response object has these properties:1
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
Chaining promises
Because calling the then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.2
Update
The .success and .error methods have been deprecated and removed from AngularJS V1.6.
For more information, see
Why are angular $http success/error methods deprecated? Removed from v1.6?.
One important difference is that you should probably use .then().catch() instead of .then(function(), function()). [1] The two-argument then (where the second function is the error handler) does not capture errors in the first function, as I understand it. IOW: $http.get().then(a, b) will not call b() if a() throws an error, where as $http.get().then(a).catch(b) will.
What other sorts of different behaviors are you getting?
1: standardized Promise API - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
The success function and the promise callback indeed receive different objects. As described in the docs, the promise callback receives a response object containing status, headers, data etc. The success function returns just the data field (the response body) of that object.
I have the following OrientDB function:
http://localhost:2480/function/Application/getPassFailCount/9:600
And it returns the following JSON result:
{"result":[{"#type":"d","#version":0,"pass":16.0,"fail":2.0,"#fieldTypes":"pass=d,fail=d"}]}
What I need to do is to get the values of "pass" and "fail" to use in my web page.
So far I have done this with AngularJS:
$http.get('http://localhost:2480/function/Application/getPassFailCount/9:600').
success(function(data) {
$scope.data = data.result;
// $scope.passCount = ;
// $scope.failCount = ;
});
Currently it gives the error "401 Unauthorized". How do I authenticate the request?
And if possible, can anyone give some tips on how to get the passCount and failCount from the JSON result returned?
The OrientDB HTTP API documentation states that you have to use HTTP Basic authentication for issuing commands. That means you have to include an Authorization header along with your request.
There are a few ways to achieve this, here is a simpler one. Use the configuration object parameter for $http.get to set the header on the request:
function base64(str) {
return btoa(unescape(encodeURIComponent(str)));
}
$http.get('http://...', {
headers: { 'Authorization': 'Basic ' + base64(user + ':' + password) }
}).success(...);
You should definitely move all your database logic to an Angular service, so you can keep this code in one place instead of polluting your controllers.
To make it even cleaner, you could look into $http interceptors and write a request interceptor that adds the header to every HTTP call.
Regarding the JSON question: you can see that the result object contains an array with a single element. Use indexing to get the actual record.
var result = data.result[0];
$scope.passCount = result.pass;
$scope.failCount = result.fail;
If you wrote a service as I mentioned, you could hide this implementation detail from your controller.
function getCount() {
return $http.get(...).then(function (data) {
var result = data.result[0];
// the caller will only see this simpler object
return { pass: result.pass, fail: result.fail };
});
}
I have an angular app that's using a promise to fetch an array in a factory but I don't understand how to work with the .then argument. What exactly is response and how can I access the data within it? How would I say something like response.objectProperty? Why won't console.log() work in here?
myArray.getArrayObjects(objectProperty).then(function (response) {
$scope.model = response;
console.log('Cannot test');
}
From the documentation:
The response object has these properties:
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
The .data property corresponds to what would be passed in as the first argument to a success() handler, so what you want is:
myArray.getArrayObjects(objectProperty).then(function (response) {
$scope.model = response.data.objectProperty;
console.log('Cannot test');
});