I am new to angularjs. Correct me if i am doing this wrong about promise.
doSomething(x)
{
console.log(x);
}
var something = 0;
$http.post('/url')
.then(function (response) {
something = response.data;
})
doSomething(something);
assuming that variable something has value..
everytime i log it in the console inside the doSomething method. the value
i receive is always 0;
what i did is put the method inside the then clause.
and i get the right value.
var something = 0;
$http.post('/url')
.then(function (response) {
something = response.data;
doSomething(something);
})
is this 2nd code right? or did i miss something in my first code?
thanks
Your second code is right. Because $http returns a promise and that can take n time to return so it never goes in the .then instead the next statement is triggered.
So, if suppose now you want to do something like your first code then you can use $q service. Like so (But, I won't recommend doing it here as it is not needed here).
doSomething(x)
{
console.log(x);
}
var defer = $q.defer();
$http.post('/url')
.then(function (response) {
defer.resolve(response.data);
},function (err) {
defer.reject(err);
});
defer.promise.then((data)=>{
doSomething(data);
});
Related
My code:
$q(function (resolve) {
var imageUploadResults = [];
fileUploadService.uploadImage($scope.filesUpload, "/api/mailbox/uploadAttachFile", function (result) {
console.log(result);
imageUploadResults.push(result.LocalFilePath);
});
$scope.mail.Files = imageUploadResults;
resolve($scope.mail);
}).then(function (mail) {
console.log(mail);
apiService.post("/api/mailbox/sendMail", mail, sendMailSucceed, sendMailFailed);
});
Expect:
I want to add value to mail.Files finish,then call apiService.post()
Actual:
But it execute apiService.post() with mail.Files value is [].
When apiService.post() execute finish mail.Files return value.length > 0.
Without knowing exactly which library you are actually using, it seems clear to me that fileUploadService.uploadImage() is asynchronous.
The function that you give as an argument is a callback and there is no guarantee that it would be executed "on time". In your case the path is added to imageUploadResults after the moment where you set $scope.mail.Files.
you should set $scope.mail.Files and call resolve in your callback function.
$q(function (resolve) {
var imageUploadResults = [];
fileUploadService.uploadImage($scope.filesUpload, "/api/mailbox/uploadAttachFile", function (result) {
console.log(result);
imageUploadResults.push(result.LocalFilePath);
$scope.mail.Files = imageUploadResults;
resolve($scope.mail);
});
}).then(function (mail) {
console.log(mail);
apiService.post("/api/mailbox/sendMail", mail, sendMailSucceed, sendMailFailed);
});
When you assigned $scope.mail.Files = imageUploadResults; and resolved resolve($scope.mail); there are no guarantee that fileUploadService.uploadImage finished request and saved imageUploadResults.push(result.LocalFilePath);
Possible solution is to add resolve($scope.mail); right after imageUploadResults.push(result.LocalFilePath); in function passed to fileUploadService.uploadImage
Your .then function should be using $scope.mail and not mail as a parameter? so as of right now you're sending an empty object through instead of the mail object.
I think I may be missing something fundamental about how a promise works, because I never seem to be getting the result I expect, so hoping someone can correct my thinking.
In this case, it is a relatively easy call. I have a angular factory that among other things gets some data from the API (which makes a call to mongodb).
As there is a $http request (which is asynchronous), I wrapped the http call in a $q function which should return a resolve if successful and a reject if an error.
factory.loadLayout = function (layoutName) {
return $q(function(resolve, reject){
$http.get('/api/getlayout/'+layoutName)
.success(function (data) {
layout = data;
console.log("Got " + layout.name);
resolve('OK');
})
.error(function(data,status,headers,config){
reject(new Error( status));
});
});
}
I then have another function which is dependent on the data collected in the first function, called getButtonId, but as far as I can tell, and even though it is wrapped in the .then, it seems like it is called before the promise is resolved.
var promise = padArea.loadLayout(layoutName);
promise.then(padArea.getButtonId('A0'));
So what am I missing?
== UPDATE ==
So trying the same thing using q.defer
factory.loadLayout = function (layoutName) {
var defer = $q.defer()
$http.get('/api/getlayout/'+layoutName)
.success(function (data) {
layout = data;
console.log("Got " + layout.name);
defer.resolve('OK');
})
.error(function(data,status,headers,config){
defer.reject(new Error( status));
});
return defer.promise;
}
Still not working as I expect, and the function inside .then is still called before http have completed.
== UPDATE 2 ==
OK, so got it working (if I just call the function in the factory inside the .then, it calls it directly, however, if I wrap it in a function as below, it all of a sudden works. Can anyone explain why though, because to me it seems like wrapping the call to a function inside a function should make no difference from just calling the function.
padArea.loadLayout(layoutName).then(function(result){
padArea.getButtonId('A0')
});
Strangely enough, as long as I wrap the second call in ( the one inside the .then ) my original code works as well.
Just use $http promise:
factory.loadLayout = function (layoutName) {
return $http.get('/api/getlayout/'+layoutName)
.success(function (data) {
layout = data;
console.log("Got " + layout.name);
resolve('OK');
})
.error(function(data,status,headers,config){
reject(new Error( status));
});
}
And then to use it...
factory.loadLayout(param).then(function (response) { ... });
OR
I see what you are trying to do. Instead create a deffered from $q
factory.loadLayout = function (layoutName) {
var defer = $q.defer();
$http.get('/api/getlayout/'+layoutName)
.success(function (data) {
layout = data;
console.log("Got " + layout.name);
defer.resolve('OK');
})
.error(function(data,status,headers,config){
defer.reject(new Error( status));
});
return defer.promise;
}
You could also use $q.defer():
deferred = $q.defer();
$http.get('/api/getlayout/'+layoutName)
.success(function (data) {
layout = data;
deferred.resolve("OK");
})
.error(function (data,status,headers,config){
deferred.reject(new Error(status));
})
return deferred.promise;
This can be a little more general if you're not just doing an http request, and lets you control the return.
I'm using a angular factory to run inside my controller, however my finally doesn't fun in the controller, it does run in the factory below is the code: factory -
var createProfile = function (profile) {
var deferred = $q.defer();
$http.post("localhost/profile", profile)
.success(function(data, status){
deferred.resolve(data);
})
.error(function(error, status){
$rootScope.error = sitesettings.parseErrors(error);
})
.finally(function(){
console.log('hello'); // **this message logs**
});
return deferred.promise;
};
and in my Controller I have this:
profileFactory.createProfile (profile)
.then(function (data) {
// **works if successful**
})
.finally(function () {
console.log('fin'); // **this never fires, successfully or on an error**
});
I guess I could pass my object into the profileFactory like profileFactory.createProfile (profile, myObject) and return it, but it seems counter intuitive.
Can somebody please advise. thank you.
kind regards
It's because you're returning a different promise, which you never manually resolve. If you just return $http.post(//etc.) it should work fine.
EDIT:
I might've spoken to soon. I missed that you were resolving in your success. But that seems unnecessary. Just do
return $http.post("localhost/profile", profile);
and have your controller attach success, error, and finally handles.
I am learning AngularJS after converting from jQuery for a few years. And some bits are much more intuitive. Some not so much :).
I am trying to get my head around the use of promises, particularly $q in use with $http and there does not seem to be too much information around these two combined that I can find.
Why would I use promises in place of the success/error callback? They both make uses of callbacks in reality, so why is a promise considered better? E.g. I could set up a get(...) function like follows:
function get(url, success, error) {
success = success || function () {};
error = error || function () {};
$http.get(url)
.success(function (data) {
success(data);
})
.error(function (error) {
error(error);
});
}
get('http://myservice.com/JSON/',
function () {
// do something with data
},
function () {
// display an error
}
);
Which is good(?) because it gives me complete control over what is happening. If I call get(...) then I can control any success/errors wherever get is called.
If I convert this to use promises, then I get:
function get(url) {
return $http.get(url)
.then(function (data) {
return data;
},
function (error) {
return error;
});
}
get('http://myservice.com/JSON/')
.then(function (data) {
// do something with data
});
// cannot handle my errors?
Which is condensed, I agree; we also do not have to explicitly worry about the success/error callback, but I seem to have lost control over my error callback for a start - because I cannot configure a second callback to handle an error.
Which means that if I use this function in a service which can be used by multiple controllers, then I cannot update the UI to alert the user to an error.
Am I missing something? Is there a reason why promises is preferred? I cannot find an example why.
Usually you'll deal with asynchronous tasks in Javascript with callbacks;
$.get('path/to/data', function(data) {
console.log(data);
});
It works fine, but start to complicate when you go into whats called the 'callback hell';
$.get('path/to/data', function(data) {
$.get('path/to/data2' + data, function(data2) {
$.get('path/to/data3' + data2, function(data3) {
manipulate(data, data2, data3);
}, errorCb);
}, errorCb);
}, errorCb);
The alternative is working with promises and defered object;
Deferreds - representing units of work
Promises - representing data from those Deferreds
Sticking to this agenda can assist to you in every extreme asynctask case:
You have a regular call that need to get data from the server, manipulate it, and return to the scope
You have multiple calls that each is depending on the precious one (cahin strategy)
You want to send multiple (parallel) calls and handle their success in 1 block
You want your code to be orginized (prevent dealing with handling results on controllers)
Your task is the easiest one to handle with $q and $http
function get(url) {
var deferred = $q.defer();
$http.get(url)
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
And calling the service function is the same
get('http://myservice.com/JSON/')
.then(function (data) {
// do something with data
});
// cannot handle my errors?
You can handle the error like this:
get('http://myservice.com/JSON/')
.then(function (data) {
// do something with data
},
function (error) {
//do something with error
});
But unfortunately since you have already caught the error then the final error won't be triggered. You will also have the same problem with success.
To get that to work you ned to use $q.
function get(url) {
var deferred = $q.defer();
$http.get(url)
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
Also there is no need to pass in success and error functions because you can use promises instead.
I have an array of ids and would like to iterate over them and pass them to a service to fetch some data. But I would like to only move to the next id after the processing of the previous id has finished. After all the data has been fetched I need to call a specific function.
My code (without the iteration) wold be something like
MyService.fetch(id)
.success(function (data, status, headers, config) {
doSomething();
});
What I want to achieve is something like this but in a way which can handle an unknown number of items in my array of ids:
MyService.fetch(id).success(function (data, status, headers, config)
{
MyService.fetch(id2).success(function (data, status, headers, config)
{
doSomething();
});
});
Any ideas how to achieve this ?
thanks
Thomas
Angular comes with a lite promise library: $q.
It's actually quite simple to do.
Service
myApp.factory('theProcessor', function($q, $timeout) {
return {
fetch: function(queue, results, defer) {
defer = defer || $q.defer();
var self = this;
// Continue fetching if we still have ids left
if(queue.length) {
var id = queue.shift();
// Replace this with your http call
$timeout(function() {
// Don't forget to call d.resolve, if you add logic here
// that decides not to continue the process loop.
self.fetch(queue, results, defer);
results.push({ id: id, value: Math.floor((Math.random()*100)+1) });
}, 500);
} else {
// We're done -- inform our caller
defer.resolve(results);
}
// Return the promise which we will resolve when we're done
return defer.promise;
},
};
});
See it in action at this plunker.
Try to use following approuch:
var idsArray= [], result = [];
/// ...After filling array
function nextIteration(index) {
MyService.fetch(idsArray[index]).success(function (data, status, headers, config)
{
result.push(data);
if (++index < idsArray.length) {
nextIteration(index)
} else {
console.log('Task complete');
}
}
nextIteration(0);
You could use the $q's all() method to bundle all the promises that you define and then do something after all of them are resolved e.g:
$q.all([promise1, promise2, ...]).then(...)
You may want to consider implementing this feature in your controller or your service.
Take a look at HERE for a complete API reference and details.
UPDATE
Just thinking that your service could accept an array of ids and it could have a method which would recursively fetch the data in order that you want. Look and the following code, it's an idea so it may not work as is:
function(){
var result = [];
var fetch = function(idArr /*this is your ID array*/){
(a simple guess if what you want to do with that ID)
$http.get('yourURL?id=' + <first element of idArr>)
.success(function(data){
//some logic
result.push(data);
idArr.splice(1,0);
fetch(idArr);
});
}
}