What is the best way to implement promise in the given scenario? - javascript

I'm using D.js as promise library for our javascript application.
Following is my sample code:
function getData(deferred) {
var data_one;
// getInfo is returning a promise for async task
getInfo()
.then(function (resp_one) {
data_one = resp_one;
// getInfo2 is also returning another promise
return getInfo2();
})
.then(function (resp_two) {
deferred.resolve('prefix' + data_one + resp_two);
});
};
function sample () {
var d = D(),
data = localStorage.getItem('key');
if (data) {
d.resolve(data);
} else {
getData(d);
}
return d.promise;
}
sample().then(function (data) {
//do something with data.
});
I im invoking sample function. Is the implementation inside the sample function and sub functions following the coding standard for promises?
Im new to promises, Is it good to passing around deferred object to other function to resolve/reject ??
Is there any better way to implement the above functionality??
Thanks in advance..

Looks like you can improve the code if you use promises in more natural way.
First of all if getData returns a Promise then you don't have to pass deferred around, this is considered anti-pattern. You just simply return getInfo().
Another thing, in the sample function if your data might be already available it's convenient to use D.promisify method to return resolved promise with non-promise value:
function getData() {
var data_one;
return getInfo().then(function (resp_one) {
data_one = resp_one;
return getInfo2();
})
.then(function (resp_two) {
return 'prefix' + data_one + resp_two;
});
};
function sample() {
var data = localStorage.getItem('key');
return data ? D.promisify(data) : getData();
}
sample().then(function (data) {
//do something with data.
});

Related

Javascript Promises on Angular Controller

I don't familiar with JavaScript Promises function.
Currently I have this code on my Angular Controller
$http.get('pages/about.html').then(function(response) {
var raw_html = response.data;
$scope.aboutHTML = raw_html.replace(/</g,"<");
});
I want to re-write the code so I could do something like this
$scope.indexHTML = getHTML('pages/index.html');
$scope.aboutHTML = getHTML('pages/about.html');
...
with function like this
function getHTML(url){
$http.get(url).then(function(response) {
var raw_html = response.data;
return = raw_html.replace(/</g,"<");
});
}
How to write the the code properly for the function above?
[Update #1]
Temporary Solution by #charlietfl
function getHTML(url){
// return the promise
return $http.get(url).then(function(response) {
var raw_html = response.data.replace(/</g,"<");
return raw_html;
});
}
getHTML('pages/index.html').then(function(raw_html){
$scope.indexHTML = raw_html;
});
I wanna to write this function to reduce the manual work, with this way I still need to write down $scope.{page} for each page, so anyone know better way?
[Update #2]
Solution by #joeytwiddle
function getHTML(url){
// return the promise
return $http.get(url).then(function(response) {
var raw_html = response.data.replace(/</g,"<");
return raw_html;
});
}
getHTML('pages/index.html').then(function(raw_html){
$scope.indexHTML = raw_html;
});
There is no way to just return the result, because the result will not be available until some time in the future. #asynchronous
You can only handle the result using a callback function.
If you want to minimize the work from outside, I would suggest something like this:
getHTMLAndStore('pages/index.html', $scope, 'indexHTML');
getHTMLAndStore('pages/about.html', $scope, 'aboutHTML');
function getHTMLAndStore(url, object, property) {
$http.get(url).then(function(response) {
var raw_html = response.data;
var weird_html = raw_html.replace(/</g,"<");
object[property] = weird_html;
}).catch(console.error.apply(console));
}
This is pure JS and not really related to Angular.
Note that these two requests will fire in parallel, not in sequence.
$http returns a promise so you need to return that promise from the function and use another then() to assign the scope variable:
function getHTML(url){
// return the promise
return $http.get(url).then(function(response) {
var raw_html = response.data.replace(/</g,"<");
return raw_html;
});
}
getHTML('pages/index.html').then(function(raw_html){
$scope.indexHTML = raw_html;
});
Currently your function doesn't return anything

Angular $promise without using defer

Everything on the net about promises these days says don't use defer when using promises except docs/examples on angular.js.
What is the proper way to return the value of an angular.js $promise without using defer?
Here's what I currently have:
function foo() {
var deferred = $q.defer();
userService.findProgramsByUser({personId: personId}).$promise
.then(function (programs) {
deferred.resolve(programs);
});
return deferred.promise;
}
If i was using the node Q library I would do this:
function foo() {
return Q.promise(function(resolve, reject) {
userService.findProgramsByUser({personId: personId})
.then(function (programs) {
resolve(programs);
});
}
}
How can I do something similar with an angular promise without having to use defer?
Since userService.findProgramsByUser() already has a promise property, just return that
function foo() {
return userService.findProgramsByUser({personId: personId}).$promise
.then(function (programs) {
return programs;
}, function(){
// handle errors
});
}
I really don't understand why it's bad to use defer. In most cases my services looks like:
var defers = {}; //somewhere in the service root.
getData: function(id){
var defKey = 'getData' + id;
if(defers.hasOwnProperty(defKey)) return defers[defKey].promise;
//here is a good spot to return something from custom cache
defers[defKey] = $q.defer();
serverApiRequest('/api/...').then(function(response){
defers[defKey].resolve(response.data);
delete defers[defKey];
});
return defers[defKey].promise;
}
Deferred promises are awesome. With such approach we can be 100% sure that server will be requested only one time and every parallel requests would be served.

How to return data in a factory method within Angular?

I'm an ionic/Angular n00b and I having trouble wrapping my head around how to do this.
I have a factory defined as such:
angular.module('starter.services', [])
.factory('Calendars', function () {
var calendars;
var success = function(message) {
calendars = message;
return calendars;
};
var error = function(message) {alert("Error: " + message)};
window.plugins.calendar.listCalendars(success,error);
return {
all: function() {
return calendars;
},
get: function(calendarId) {
return calendars[calendarId];
}
}
});
And I'm trying to retrieve the calendars within my controller like this:
.controller('CalendarsCtrl', function($scope,Calendars) {
$scope.calendars = Calendars.all();
})
The factory method is being called but the results are not available until the 'success' callback is invoked so the CalendarsCtrl is always undefined.
How to solve this?
Edit - I've corrected the call within the controller. The same issue remains though, that the function does not return results until the success callback.
You will have to use a promise.
First add the dependency $q
.factory('Calendars', function ($q) {
then in all() you do this
all: function() {
var deferred = $q.defer();
window.plugins.calendar.listCalendars(function(data) {
deferred.resolve(data);
}
,function(error) {
deferred.reject(error); // something went wrong here
});
return deferred.promise;
now this will make the return after the data has been resolved (no more undefined).
One last thing, now when you get the data back at your controller you do this
var promise = Calendars.all();
promise.then(function(data) {
console.log('Success: you can use your calendar data now');
}, function(error) {
console.log('Failed for some reason:' + error);
});
You can read some more about promises here: https://docs.angularjs.org/api/ng/service/$q
I know it's hard to grasp the first time.
Angular factories are returning an object, in order to call their methods you must call them with Calendar.all() which will invoke the inner function.

To whom return is returning the value (javascript)?

I saw following code in the HotTowel project. In the following code, callback method for then returns value return vm.messabeCount = data;
(function () {
'use strict';
function dashboard(common, datacontext) {
vm.messageCount = 0;
function getMessageCount() {
return datacontext.getMessageCount().then(function (data) {
/******* Here ********/
return vm.messageCount = data;
});
}
}
})();
Am wondering why & to whom it's returning value. Is it some standard practice? Can't the code be just.
return datacontext.getMessageCount().then(function (data) {
vm.messageCount = data;
});
Or
return datacontext.getMessageCount().then(function (data) {
vm.messageCount = data;
return;
});
getMessageCount is a function returning a promise object. then method of this promise returns another promise again. It makes possible to chain multiple then parts. Each then(function() { ... }) has an ability to modify a data to be passed to the next then invocation. So this construction:
return datacontext.getMessageCount().then(function(data) {
return vm.messageCount = data;
});
means to modify a data passed to resolve callbacks. Without this return success functions would be resolved with undefined value, while we need it to be resolved with data.

How to access return value from deferred object?

I have the following code that uses $.getJSON inside the repository to return some data that is then used by other functions.
$.when(
repository.getUserDetails().done(dataPrimer.getUserDetails),
$.Deferred(
function (deferred) {
deferred.resolve();
}
)
).done(
function () {
repository.getUserPolicyTitles().done(dataPrimer.getUserPolicyTitles);
},
function () {
repository.getUserPage().done();
}
);
This works but I need to return a value from: repository.getUserDetails().done(dataPrimer.getUserDetails)
that can be used as a parameter to: repository.getUserPage().done();
The dataPrimer module for getUserDetails currently looks like this:
var getUserDetails = function (jsonString) {
var object = parser.parse(jsonString);
userDetails.userName = object.user.userName;
userDetails.lastPolicyWorkedOn = object.user.lastPolicyWorkedOn;
return userDetails.lastPolicyWorkedOn;
}
I have tried a few things such as .pipe() with no joy and want to be confident that I'm using a decent approach so I'm looking for the "best practice" way to return the parameter and use it in the repository.getUserPage() function please?
You should use "then" . The "data" in example -- data returned by "getUserPolicyTitles" function.
$.when(
repository.getUserDetails().done(dataPrimer.getUserDetails),
$.Deferred(
function (deferred) {
deferred.resolve();
}
)
).done(function() {
repository
.getUserPolicyTitles()
.done(dataPrimer.getUserPolicyTitles)
.then(function(data) {
repository.getUserPage().done();
})
});

Categories

Resources