This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
I need to get the response.data out of the promise so it can be returned by the enclosing function. I know, I probably can't do it the way I've coded it because of normal JavaScript scope. Is there any way, it can be done?
The console.log at #1 produces the correct data. console.log #2 always produces 'a';
function addSiteParentId(nodeId) {
var theParentId = 'a';
var parentId = relationsManagerResource.GetParentId(nodeId)
.then(function(response){
theParentId = response.data;
console.log(theParentId); // #1
});
console.log(theParentId); // #2
return theParentId;
}
Any pointers would be appreciated.
One of the fundamental principles behind a promise is that it's handled asynchronously. This means that you cannot create a promise and then immediately use its result synchronously in your code (e.g. it's not possible to return the result of a promise from within the function that initiated the promise).
What you likely want to do instead is to return the entire promise itself. Then whatever function needs its result can call .then() on the promise, and the result will be there when the promise has been resolved.
Here is a resource from HTML5Rocks that goes over the lifecycle of a promise, and how its output is resolved asynchronously:
https://web.dev/promises/
I also don't like using a function to handle a property which has been resolved again and again in every controller and service. Seem I'm not alone :D
Don't tried to get result with a promise as a variable, of course no way. But I found and use a solution below to access to the result as a property.
Firstly, write result to a property of your service:
app.factory('your_factory',function(){
var theParentIdResult = null;
var factoryReturn = {
theParentId: theParentIdResult,
addSiteParentId : addSiteParentId
};
return factoryReturn;
function addSiteParentId(nodeId) {
var theParentId = 'a';
var parentId = relationsManagerResource.GetParentId(nodeId)
.then(function(response){
factoryReturn.theParentIdResult = response.data;
console.log(theParentId); // #1
});
}
})
Now, we just need to ensure that method addSiteParentId always be resolved before we accessed to property theParentId. We can achieve this by using some ways.
Use resolve in router method:
resolve: {
parentId: function (your_factory) {
your_factory.addSiteParentId();
}
}
then in controller and other services used in your router, just call your_factory.theParentId to get your property.
Referce here for more information:
http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx
Use run method of app to resolve your service.
app.run(function (your_factory) { your_factory.addSiteParentId(); })
Inject it in the first controller or services of the controller. In the controller we can call all required init services. Then all remain controllers as children of main controller can be accessed to this property normally as you want.
Chose your ways depend on your context depend on scope of your variable and reading frequency of your variable.
You have to return a promise instead of a variable.
So in your function just return:
return relationsManagerResource.GetParentId(nodeId)
And later resolve the returned promise.
Or you can make another deferred and resolve theParentId with it.
Related
This question already has answers here:
Why are AngularJS $http success/error methods deprecated? Removed from v1.6?
(2 answers)
Is this a "Deferred Antipattern"?
(3 answers)
Closed 4 years ago.
I am currently using $q service from angular to make API calls like this:
var deferred = $q.defer();
$http.get(config.apiHost + details.url)
.success(function (data) {
deferred.resolve(data);
}).error(function (msg) {
deferred.reject(msg);
});
return deferred.promise;
but we can also use this approach also without using $q:
return $http.get(config.apiHost + details.url)
.success(function (data) {
return data;
}).error(function (msg) {
return msg;
});
and as $http itself returns the promise, I can also use more simplified approach:
$http.get(config.apiHost + 'posts')
.success(function (data) {
console.log(data)
}).error(function (msg) {
console.log(msg);
});
So what is the difference between all these specially between $q and $http, as both returns promise and both are async ? Does angular provides some additional functionality with $q ?
I am not able to find any good answer.
$http uses $q, the first example is redundant, and so is the second. You just need to return the promise that $http.get returns:
return $http.get(config.apiHost + details.url);
The above is the same as your first piece of code.
In addition, return msg is not the same as deferred.reject(msg). The equivalent would be throw msg or return $q.reject(msg)
Another thing to note is that success and error are non-standard, you want to use then and catch.
$q is mainly only used for compatibility with libraries that don't support promises by default and when you can't rely on a native implementation of Promise (for example - in older browsers like IE9). There's no reason (for you) to use it otherwise. An example would if you wanted to make a promise-based $timeout. $http itself uses $q under the hood for these exact reasons.
Unlike what other (since deleted) answers have suggested, you do not need to use $q in order to "store" the result of the $http promise. I would not recommend storing the promise at all (as this tends to lead to spaghetti code), but if you must absolutely do this, you can just store the resultant promise from $http; promises only ever execute once.
Any functions passed to then after a promise has resolved/rejected will be resolved on the next tick, without re-invoking the original action that created the promise in the first place - IOW, the result of the promise is memoized within that object.
Also note that promises chain, which is abit out of scope for this answer, but it essentially means that the following pieces of code are equivalent
function legacyGet() {
const deferred = $q.defer()
$http.get('http://www.google.com')
.then((response) => deferred.resolve(Object.assign(response, {foo: bar}))
.catch((error) => deferred.reject(error))
return deferred.defer
}
function modernGet() {
return $http.get('http://www.google.com')
.then((response) => Object.assign(response, {foo: bar}))
}
To summarise: Your title is wrong. We don't prefer using $q, we only use it sparingly. Prefer to use an ES6 Promise unless you need to support browsers that don't have it and you can't use a polyfill.
In angular mostly all the services returns promises only, but there are some instances where you would like to create your own deferred object using $q.
Case 1
When you are using a library which does not support promise or you have created your own function and want to return a promise.
Case 2
When you are using any construct which by default returns a promise but you want to return a separate promise based on some on some condition.
Example: In angular $http returns a promise only but now if you want that if the response of this promise contains a particular value then only you want to return resolved else return failure then you need to create your own deffered object and need to resolve or fail it based on the value returned by $http response.
This question already has answers here:
How can I access a variable outside a promise `.then` method?
(2 answers)
Closed 5 years ago.
I have a factory named readingService the factory method GetLastSyncTimestamp return a DateTime from a web service, after calling the factory I have assign return DateTime in $scope.lastSyncTimestamp variable, but problem is inside the promise I can get the DateTime correctly
readingService.GetLastSyncTimestamp($scope.id).then(function(d) {
$scope.lastSyncTimestamp = d.data;
console.log($scope.lastSyncTimestamp);
});
but outside the promise I don't get any data
readingService.GetLastSyncTimestamp($scope.id).then(function(d) {
$scope.lastSyncTimestamp = d.data;
});
console.log($scope.lastSyncTimestamp);
is there any way to get data outside the promise ?
Create a service
.service('DataService', function () {
var service = {};
service.defaultvalue= "1";
return service;
})
and inject it in the controller.
Then you can use it in the promise like:
dataservice.lastSyncTimestamp = d.data;
and also outside will be working.
example:
https://github.com/leader80/angularjs-dataservice/blob/master/js/dataService.js
In this example:
readingService.GetLastSyncTimestamp($scope.id).then(function(d) {
$scope.lastSyncTimestamp = d.data;
});
console.log($scope.lastSyncTimestamp);
The promise is not returning before the console.log($scope.lastSyncTimestap); line is executed. You can either handle the data within the promise or encapsulate the functionality you wish to do with the data in a function and call that function from within the promise.
This question already has answers here:
jQuery deferreds and promises - .then() vs .done()
(11 answers)
Closed 7 years ago.
There is not much answer for this simple question that I have. My main question is that I have seen the .then method used a lot in JavaScript and I know the main thing where randomobject.then(//This returns success, //this returns failure). But there are things that I don't get such as the code here:
var success = function (response) {
return response.data;
};
var error = function (errResponse) {
$log.error(errResponse.data.Message);
};
function getsomeData() {
var url = baseUrl + 'api/somedata';
return $http.get(url).then(success, error);
}
First off in that code I'm wondering how the var success knows what data it is getting and the same with error. It says response.data but what is response? It's probably the result of the http.get but that doesn't make much sense code wise. Also it seems that when I have a function for example.
getsomeData returns what it returns. Why doesn't it work if I do the ff:
var dataHolder = randomAngularService.getsomeData()
it returns an object that holds a data under $$state but somehow the .then makes it work if you do the ff:
randomAngularService.getsomeData().then(function (response) {
if(response != null) {
console.log('got the data');
$scope.meeData = response;
}
});
I thought the .then only takes two parameters? This is what's confusing me.
Also is the .then property a JavaScript method or a jQuery one?
It's used to replace (or provide an alternate way) the old callback mechanism with a cleaner way to handle asynchronous requests, instead of passing your callbacks as parameters, you can chain your function with .then, given function will be executed once the promise gets resolved.
Anyhow, this is just a basic explanation, you should really get into the books of promises for more info.
I'm lazy to explain the whole promise thing, but just to answer question about .then
The 2 arguments inside .then actually means "call this function when the promise is resolved(success)/rejected(failed)"
About the arguments inside the functions, they should be specified in the API, because the caller (for instance $http.get) get to decide what to pass when calling that function.
This question already has answers here:
setting a variable to get return from call back function using promise
(2 answers)
Closed 8 years ago.
I'm new to Promise's and I'm trying to wrap my head around getting the value.
Here's an idea of what I'm trying to do:
API = {
get: function() {
return new Promise(function(res) {
setTimeout(function() {
res('foo')
}, 1000)
})
}
}
var foo = API.get()
console.log(foo)
It's important that var foo = API.get() remains as it is.
Any idea what to do here?
Promises are still asynchronous. You still can't inspect their value in synchronous code.
You need:
API.get().then(function(result) {
// Resolved value from the Promise object returned by API.get()
console.log(result);
});
API.get() returns a promise object, you then invoke the .then() method on that object.
Another more verbose way would be:
var fooPromise = API.get();
fooPromise.then(function(result) {
console.log(result);
});
Promises are about something happening in the future; you cannot examine their eventual values now unless you are in possession of a time machine.
I am not suggesting you do this, but merely for didactic purposes, if you really want your code to function as you seem to, you could redefine console.log to be promise-aware:
console.log = function() {
var old_console_dot_log = console.log.bind(console);
return function(maybe_promise) {
Promise.resolve(maybe_promise).then(old_console_dot_log);
};
}();
(This version only handles one argument; handling more is left as an exercise.)
Now when you say console.log(foo), it will log the resolved value of foo, but only when it is good and ready, one second from now.
This question already has answers here:
Any way to know if a variable is an angularjs promise?
(4 answers)
Closed 8 years ago.
There are cases when I need to check if an object is a promise or not, e.g. to show a loading indicator when getting initial data from an API which might take a couple of seconds.
So far I'm using this code snippet:
if ($scope.data.$resolved === false){
// data is a promise as it is not resolved yet
}
else{
// data is not a promise as it either never was or has been resolved
}
This seems to work well but since I'm not an Angular expert (yet) I was wondering if there's a better / recommended way to check if an object is a promise. Thanks!
You don't need to know, if the promise is already resolved. If you pass your callback into the .then, this code will be executed, even if the promise is already resolved.
And it seems like a bad practice make your method return 2 different types.
A promise or the data directly.
Just always return a promise, even if the data is fetched from the cache.
Pass it into the .resolve, where ever the data did come from.
Something like this:
function getData(){
var data = getFromCache();
if( data ) {
var deferred = $q.defer(); //Make your own promise
deferred.resolve(data);
return deferred.promise;
}else{
return $http.get("someData.json") //Return the promise from the `$http.get`
.then(function(data){
return data;
});
}
}