I have an array of items on my $scope. For each of those items, I need to run three $http requests. These requests must run in a specific order, no matter whether there was a failure of not. I'm not sure how to do this elegantly, with the promise paradigm. I have a lot of duplicate code and it looks really confusing. I have to be doing this wrong. Currently, I have the following:
$scope.items = getItems();
$scope.currentIndex = 0;
$scope.executeItem = function() {
$http.get($scope.items[$scope.currentIndex].urlA).then(
function (resA) {
$scope.items[$scope.currentIndex].urlAWorks = true;
$http.get($scope.items[$scope.currentIndex].urlB).then(
function (resB) {
$scope.items[$scope.currentIndex].urlBWorks = true;
$http.get($scope.items[$scope.currentIndex].urlC).then(
function (resC) {
$scope.items[$scope.currentIndex].urlCWorks = true;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
},
function (errC) {
$scope.items[$scope.currentIndex].urlCWorks = false;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
}
)
},
function (errB) {
$scope.items[$scope.currentIndex].urlBWorks = false;
}
);
},
function (errA) {
$scope.items[$scope.currentIndex].urlAWorks = false;
$http.get($scope.items[$scope.currentIndex].urlB).then(
function (resB) {
$scope.items[$scope.currentIndex].urlBWorks = true;
$http.get($scope.items[$scope.currentIndex].urlC).then(
function (resC) {
$scope.items[$scope.currentIndex].urlCWorks = true;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
},
function (errC) {
$scope.items[$scope.currentIndex].urlCWorks = false;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
}
)
},
function (errB) {
$scope.items[$scope.currentIndex].urlBWorks = false;
}
);
}
);
};
Am I really chaining promises correctly? This looks WAY off.
Thank you
You are underusing promises :) Since .then returns a promise, you could do:
$http.get(urlA)
.then(function(dataA){
DoStuffWithA(dataA);
return $http.get(urlB);
})
.then(function(dataB){
DoStuffWithB(dataB);
return $http.get(urlC);
})
.then(function(dataC){
DoStuffWithC(dataC);
return true;
})
Just create references to those functions with a parameter binding. Instead of
$http.get($scope.items[$scope.currentIndex].urlC).then(
function (resC) {
$scope.items[$scope.currentIndex].urlCWorks = true;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
},
function (errC) {
$scope.items[$scope.currentIndex].urlCWorks = false;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
}
)
Do:
var next_thingy = function (worked) {
return function () {
$scope.items[$scope.currentIndex].urlCWorks = worked;
$scope.currentIndex = $scope.currentIndex + 1;
$scope.executeItem();
}
}
$http.get($scope.items[$scope.currentIndex].urlC)
.then(next_thingy(true),next_thingy(false));
Then chain them together:
var req1 = $http.get(...)
var thingies = {}
var thingies.next_thingy = function( worked) {
return function() {
var req = $http.get(...)
...
req.then(thingies.next_thingy2(true),thingies.next_thingy2(false))
}
}
req1.then(thingies.next_thingy(false),thingies.next_thingy(true))
var thingies.next_thingy2 = function(worked2) {
return function() {
var req2 = $http.get(...)
...
req2.then(thingies.next_thingy3(true),thingies.next_thingy3(false);
}
}
var thingies.next_thingy3 = function(worked3) {
return function() {
...
}
}
You can fork them all off in parallel and then wait for them to finish with:
var third_reqs = []
$scope.items.forEach(function(item) {
var third_req_defer = $q.defer()
third_reqs.push(third_req_defer.promise)
...
var thingies.next_thingy3 = function(worked3) {
return function() {
...
third_req_defer.resolve()
}
}
})
$q.all(third_reqs).then(
function() { $log.log("Finished!")},
function(){ $log.error("some third reqs failed.")})
Related
How can i send parameter this to function.
Above options work in constructor :
selectors[i].onblur = this.validation;
But if in function Valid i call the selectors[i].validation, above solution will not working. Does Somebody know, how to call selectors[i].validation with parameter this??
For any help, i will be very grateful.
link to demo:
http://codepen.io/anon/pen/YqryVr
My js classes:
var Validator = (function () {
var errorClassName = "error";
var selectors;
var regexMap;
function Validator(id, regexObject) {
if (id === void 0) { id = "form"; }
regexMap = regexObject.getMap();
selectors = document.getElementById(id).elements;
for (i = 0; i < selectors.length; ++i) {
selectors[i].onblur = this.validation;
}
};
Validator.prototype.setErrorClassName = function (className) {
errorClassName = className;
};
Validator.prototype.addClass = function (selector) {
if(selector.className.indexOf(errorClassName) < 1)
selector.className += " " + errorClassName;
};
Validator.prototype.removeClass = function (selector) {
selector.className = selector.className.replace(errorClassName, '');
};
Validator.prototype.validation = function () {
alert('this.type: ' + this.type);
switch(this.type) {
case 'textarea':
case 'text':
if(this.dataset.regex in regexMap) this.dataset.regex = regexMap[this.dataset.regex];
var pattern = new RegExp(this.dataset.regex);
if(this.value.length !== 0 && pattern.test(this.value)) {
Validator.prototype.removeClass(this);
return true;
} else {
Validator.prototype.addClass(this);
return false;
}
break;
case 'select-one':
if(this.value.length === 0) {
Validator.prototype.addClass(this);
return false;
} else {
Validator.prototype.removeClass(this);
return true;
}
break;
}
return true;
};
Validator.prototype.valid = function () {
for (i = 0; i < selectors.length; ++i) {
selectors[i].validation;
}
return true;
};
return Validator;
}());
var SelectorAttribute = (function () {
function SelectorAttribute(name, regex) {
this.name = name;
this.regex = regex;
}
SelectorAttribute.prototype.toString = function () {
return "name: " + this.name + ", regex = " + this.regex;
};
return SelectorAttribute;
}());
var StandardRegexPatterns = (function () {
var map = {};
function StandardRegexPatterns() {
map['zip-code-poland'] = '^[0-9]{2}-[0-9]{3}$';
map['phone-number-poland'] = '^[0-9]{9}$';
map['digits'] = '^[0-9]+$';
map['alpha'] = '^[a-zA-z]+$';
map['email'] = '^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*#([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?';
map['login'] = '^[a-z0-9_-\.]{3,21}$';
map['ip-address'] = '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
map['url-address'] = '^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$';
}
StandardRegexPatterns.prototype.getMap = function () {
return map;
};
return StandardRegexPatterns;
}());
$( document ).ready(function() {
var validator = new Validator('form', new StandardRegexPatterns());
validator.setErrorClassName("error");
//var pattern = new StandardRegexPatterns();
// alert(Object.keys(pattern.getMap()));
$("button").on('click', function(){
alert(validator.valid());
});
});
You can use the following:
functionname.apply(this, [arguments]);
or
functionname.call(this, argument1, argument2);
if you don't have arguments you can just omit them.
I usually just do this:
funcitonname.apply(this, Arguments);
if I'm calling this method from within a function already so I can carry on the arguments to the functionname().
Learn more about apply
Learn more about call
I am trying to bind a variable to a scope before it moves to the view but my view shows before the variable is bounded. Here is my code.
$scope.getListing = function() {
var deferred = $q.defer();
$scope.$applyAsync(function() {
$rootScope.listingDetails =[];
referralCasesGroupByCaseStatus.getListing($rootScope.userDetails.rows.item(2).value).then(function(data){
$rootScope.listingDetails = data
deferred.resolve($rootScope.listingDetails)
if($rootScope.fromDashboard === false) {
$scope.showCaseStatus(1);
$state.go('app.case_status')
}
else {
$scope.showCaseStatus($rootScope.statusNumber)
$state.go('app.case_status')
$ionicLoading.hide();
}
});
})
return deferred.promise;
};
var changedNumber = 0;
$scope.showCaseStatus = function(number) {
var finishedPushingListings = false;
$rootScope.listingByCaseStatus = [];
$rootScope.caseStatusListings = [];
if(changedNumber !== 0 && changedNumber !== number) {
changedNumber = number;
}
else {
if(changedNumber > 0) {
$scope.$applyAsync($rootScope.detailsPresent = true);
}
}
$scope.$applyAsync(function() {
angular.forEach($rootScope.listingDetails, function(value, key) {
if(value.real_estate_agent_assignment_status_id == number) {
$rootScope.listingByCaseStatus.push(value);
}
});
})
$scope.$applyAsync(function() {
if($rootScope.listingByCaseStatus == 0 || $rootScope.listingByCaseStatus == undefined || $rootScope.listingByCaseStatus == null) {
$rootScope.detailsPresent = true;
$rootScope.changeNumber = true;
finishedPushingListings = true;
}
else {
$rootScope.detailsPresent = false;
$scope.noMoreItemsAvailable = false;
$rootScope.changeNumber = true;
finishedPushingListings = true;
}
})
};
The main problem here is that the function $scope.showCaseStatus($rootScope.statusNumber) doesnt finish executing before it executes the $state.go('app.case_status') and i would like for it to wait and finish executing before it jumps to the $state.go('app.case_status').
Any help is appreciated.
Since you are using $applyAsync(), the function effects are asynchronous. One way to achieve what you want is to make showCaseStatus() return a promise - and take into account that there are 2 asynchronous blocks:
$scope.showCaseStatus = function(number) {
var ..., d1, d2;
...
d1 = $q.defer();
$scope.$applyAsync(function() {
angular.forEach($rootScope.listingDetails, function(value, key) {
...
});
d1.resolve();
})
d2 = $q.defer();
$scope.$applyAsync(function() {
...
d2.resolve();
})
// both promises must be resolved to continue
return $q.all([d1.promise, d2.promise]);
};
Then the caller becomes:
$scope.showCaseStatus($rootScope.statusNumber).then(function() {
$state.go('app.case_status')
$ionicLoading.hide();
});
Some notes:
If you do not need the async blocks, you can remove them and simplify the code
If the second async block relies on the result of the first, they too should be synchronized
I have the following code and in the code when I enter inside the if statement (if (that.cont) ) I get an error of a un-finished promise chain, what can be the reason for this and how should I avoid it?
run: function() {
var oDef = Q.defer();
var Obj = Q(sWUrl);
if (that.cont) {
Obj = that.cont.get(that.cont.transl).then(function(mSet) {
debugger;
if (mSet) {
var lang = mSet.supportedLang;
var dft = mSet.defaultLang;
if (!dft) {
if (lang) {
dft = lang.split(",")[1];
} else {
dft = "en";
}
}
return Q(sWUrl + "&lang=" + window.encodeURIComponent(lang));
} else {
return Q(sWUrl);
}
}, function() {
return Q(sWUrl);
}).then(function(sUri) {
return that.cont.se.pre.get("Pre").then(function(oPreSet) {
return sUri + "&device=" + window.encodeURIComponent(oPreSet.dte);
}).fail(function(error) {
return sUri;
});
});
}
return Obj.then(function(sUri) {
oWin.window.location.href = sUri;
return oWin.oDef.promise;
});
},
I don't know where that error would be coming from, but one thing is for sure - whatever you return from run is never going to resolve, because you never resolve oDef (and you are using the "deferred antipattern").
You also seem to be mistakenly under the assumption that you have to return a promise from your handlers (although you are forgetting to do this in one place), but this is not true. You can just return ordinary values if there's nothing to await.
Give this a try:
run: function() {
var p;
if (that.cont) {
p = that.cont.get(that.cont.transl).then(function(mSet) {
if (mSet) {
var lang = mSet.supportedLang;
var dft = mSet.defaultLang;
if (!dft) {
if (lang) {
dft = lang.split(",")[1];
} else {
dft = "en";
}
}
return sWUrl + "&lang=" + window.encodeURIComponent(lang);
} else {
return sWUrl;
}
}, function() {
return sWUrl;
}).then(function(sUri) {
return that.cont.se.pre.get("Pre").then(function(oPreSet) {
return sUri + "&device=" + window.encodeURIComponent(oPreSet.dte);
}).fail(function(error) {
return sUri;
});
});
} else {
p = Q(sWUrl);
}
return p.then(function(sUri) {
oWin.window.location.href = sUri;
});
},
Below Infinite-scroll factory i am using to get data from backend, is there any where to apply $promise to this method as in controller i need to know when data has finished loading .
Factory :
app.factory('Gallery', function($http) {
var Gallery = function(media, album_type) {
this.items = [];
this.busy = false;
this.next = '/upload/list/'+ media +'/?album='+album_type+'&page=1';
this.end=false;
};
Gallery.prototype.nextPage = function() {
if (this.busy) return;
this.busy = true;
if (this.next){
var url = this.next;
}
else{
this.end=true;
this.busy = false;
return
}
$http.get(url).success(function(data) {
var items = data.results;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i]);
}
this.next=data.next;
this.busy = false;
if (!data.next)
this.end=true;
this.count=data.count;
}.bind(this));
};
return Gallery;
});
In Controller;
$scope.images = $scope.images || new ScrollGallery('image', 'CRP');
I solved issue by adding $q in ininite-service , $q returns promise method .which i can use to to check if http was success to failed .
Infinite-service ::
app.factory('ScrollGallery', function($http,$q) {
var Gallery = function(url) {
this.items = [];
this.busy = false;
this.next = url;
this.end = false;
this.extra = {};
};
Gallery.prototype.nextPage = function() {
var def = $q.defer();
if (this.busy)
return;
this.busy = true;
if (this.next) {
var url = this.next;
} else {
this.end = true;
this.busy = false;
return;
}
$http.get(url).success( function(data) {
var items = data.results;
var extra = [];
if ( typeof data.extra != 'undefined') {
extra = data.extra;
}
for (var i = 0; i < items.length; i++) {
this.items.push(items[i]);
}
this.extra = extra;
this.next = data.next;
this.busy = false;
if (!data.next)
this.end = true;
this.count = data.count;
def.resolve(data);
}.bind(this));
return def.promise;
};
return Gallery;
});
In controller ::
$scope.mediacontent[$scope.slider_url] =new ScrollGallery($scope.slider_url_pass);
$scope.mediacontent[$scope.slider_url].nextPage().then(function(albums) {
$scope.mediacontent[$scope.slider_url].items[$scope.img_no].active=true;
console.log('albums returned to controller.');
},
function(data) {
console.log('albums retrieval failed.');
});
I build a prototype that handle pages, I successfully add (push), but can get the data, I failed:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
Here the javascript page handler:
var Pages = new Array();
PageContainer = function () //constructor for the proxy
{
// this._baseURL = url;
};
PageContainer.prototype =
{
AddPage: function (data) {
if (data == null) return;
Pages.push({ PageID: data.PageID, SegmentID: data.SegmentID });
},
GetPage: function (PageID) {
alert('getPage('+PageID+')=' + JSON.stringify(Pages));
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
var dt = { PageID: Pages[foundImageIndex].PageID, SegmentID: Pages[foundImageIndex].SegmentID };
return dt;
}
};
I call from other js as following:
var gPageContainer = new PageContainer();
for (var i = 0; i < SegStruct.SegmentsCount; i++) {
var segRClass = //get from webservice
gPageContainer.AddPage({ PageID: i, SegmentID: segRClass.SegmentID });
}
I trying to call: gPageContainer.GetPage(1); but it failed in GetPage: function (PageID) it returns -1 in:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
foundImageIndex always -1
why?
Simply add the following before the constructor:
if (typeof Array.prototype.indexFirst == 'undefined') {
Array.prototype.indexFirst = function (validator) {
for (var i = 0; i <= this.length - 1; i++) {
if (validator(this[i])) {
return i;
}
}
return -1;
};
}