I have a long chain of promises that wind through a module of my code. I don't know beforehand how many promises I'll wind through, nor do I have scope from any one promise to any other other promise (meaning I can't do a Promise.join()).
My problem is that I have then() callbacks attached to multiple promises on this chain. How can I control which one is fired last?
UPDATE: Here's a simplified example:
var aFn = function () {
return bFn().then(someFn);
};
var bFn = function () {
return new Promise(function (resolve, reject) {
if (a) return resolve();
else return reject();
});
};
aFn().then(anotherFn);
My problem is that the .then() in aFn().then(anotherFn) gets called before bFn().then(someFn).
Here are a few code snippets that helps illustrate my issue:
strategy.js
execute: function (model, options) {
options.url = this.policy.getUrl(model, this.method, options);
options.collection = this.policy.getCollection(model, options);
options.model = model;
// This is a Promise that eventually calls get()
return this.sync(model, options);
},
get: function (key, options) {
var updateCollection = this._getUpdateCollection(options);
var getFromCache = _.bind(this.store.get, this.store, key, options);
if (updateCollection) {
// updateCollection received a promise from store-helpers.js:proxyGetItem()
return updateCollection().then(
function (collection) {
var modelResponse = collection.policy.findSameModel(collection.raw, options.model);
return modelResponse ? modelResponse : getFromCache();
},
getFromCache
);
} else {
return getFromCache();
}
},
_getUpdateCollection: function (options) {
var collection = options && options.collection;
var collectionControl = collection && collection.sync && collection.sync.hoardControl;
if (collection && collectionControl) {
var collectionKey = collectionControl.policy.getKey(collection, options);
return _.bind(function () {
// store.get() passes the returned promise of store-helpers.js:proxyGetItem()
return this.store.get(collectionKey, options).then(function (rawCollection) {
return {
control: collectionControl,
policy: collectionControl.policy,
key: collectionKey,
raw: rawCollection
};
});
}, this);
}
},
store.js
// Just a proxy function that wraps a synchronous get
get: function (key, options) {
return this.getItem.apply(this, arguments);
},
getItem: StoreHelpers.proxyGetItem
store-helpers.js
proxyGetItem: function (key, options) {
return Hoard.Promise.resolve()
.then(_.bind(function () {
return this.backend.getItem(key);
}, this))
.then(function (raw) {
var storedValue = JSON.parse(raw);
if (storedValue !== null) {
return storedValue;
} else {
return Hoard.Promise.reject();
}
});
},
In a very different part of the app I also have:
var originalExecute = Hoard.Strategy.prototype.execute;
Hoard.Strategy.prototype.execute = function (model, options) {
options.originalOptions = _.clone(options);
if (options.saveToCacheFirst)
return originalExecute.call(this, model, options)
.then(_.result(options.originalOptions, 'success'), _.result(options.originalOptions, 'error'));
return originalExecute.call(this, model, options);
}
I would like for the .then() above to fire last, however when .resolve in store-helpers.js is fired, this last .then() callback is invoked.
My problem is that the .then() in aFn().then(anotherFn) gets called before bFn().then(someFn)
No it doesn't. As you've written the example, that expression is equivalent to
bFn().then(someFn).then(anotherFn)
- and while the .then() method does get called before someFn, the anotherFn callback does not.
Related
Use Case: I have users that need a relatively simple dot-notation that also handles a significant amount of asynchronicity. I have been tinkering with a pattern that is most likely verging into a closure. The pattern includes:
Initial function definition
Prototype method declaration
Functions within prototype that typically will return a value or promise.
Outcome: I would like a user to be able to access these methods in the format:
ParentFunction.prototype_method.nested_function(args);
Problem
Right now I am seeing various undefined issues and since I am designing this to be a rather large API implementation, I am unsure whether this pattern is most appropriate. Since I come from a Java background I prefer this type of approach if at all possible, and my end goal is to make the implementation of the API as readable and accessible as possible for junior users.
Sample Source
//Parent function
var Actor = function(model, timings, options) {
this.model = {
"node": node
};
this.timings = timings;
this.options = options;
};
//Sample prototype method
Actor.prototype.eventController = function() {
var self = this;
var clickEvent = function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
try {
$(self.model.node).trigger('click');
resolve(true);
} catch (error) {
resolve(false);
}
}, self.timings.click);
});
}
var mouseOverEvent = function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
try {
$(self.model.node).trigger('mouseover');
resolve(true);
} catch (error) {
resolve(false);
}
}, self.timings.mouseover);
});
}
//Instantiate parent function
var actor = new Actor();
//Access nested function within prototype method then handle promise result
actor.eventController.clickEvent.then(...);
Rather than messing about with prototypes, what if your constructor function set the properties you need?
// dummy version for testing
const $ = (elt) => ({trigger: function(evt) {console.log(`${evt} on ${elt}`)}})
const makeHandler = (obj, evtName) => () => new Promise((resolve, reject) => {
setTimeout(() => {
try {
$(obj.model.node).trigger(evtName);
resolve(true);
} catch(error) {
resolve(false);
}
}, obj.timings[evtName]);
});
function Actor(foo) {
this.model = {node: foo};
// don't know where these would come from. Hard-coding here.
this.timings = {
click: 150,
mouseover: 100
};
this.eventController = {
clickEvent: makeHandler(this, 'click'),
mouseOverEvent: makeHandler(this, 'mouseover')
}
}
var actor1 = new Actor('abc');
var actor2 = new Actor('def');
actor1.eventController.clickEvent().then(console.log, console.log);
actor2.eventController.mouseOverEvent().then(console.log, console.log);
You could also replace that with a factory function:
function actor(foo) {
const obj = {
model: {node: foo},
timings: {
click: 150,
mouseover: 100
}
};
obj.eventController = {
clickEvent: makeHandler(obj, 'click'),
mouseOverEvent: makeHandler(obj, 'mouseover')
};
return obj;
}
var actor1 = actor('abc');
var actor2 = actor('def');
(And of course this could all be cleaned up a bit with a dose of ES6 arrow functions.)
I'm facing an issue to return promises using $q#all method.
I want to make promises dependent on each other, i.e.:
If I set obj1, obj2 and obj3 I want to get them in the same order.
How can I achieve this?
Factory:
mainFactory.$inject = ['$http', '$q'];
function mainFactory($http, $q) {
var mainFactory = {
getPromises: getPromises
};
return mainFactory;
function getPromises(id) {
promises = {
'obj1': $http.get('http1'),
'obj2': $http.get('http2'),
'obj3': $http.get('http3'),
'obj4': $http.get('http4', { params: { 'id': id } }),
'obj5': $http.get('http5'),
'obj6': $http.get('http6', { params: { 'id': id } })
};
return $q.all(promises);
}
}
Controller:
MainCtrl.$inject = ['mainFactory'];
function MainCtrl(mainFactory) {
var vm = this;
mainFactory.getPromises(id)
.then(getResponse)
.catch(getError);
function getResponse(response) {
var keys = Object.keys(response), i = keys.length;
while (i--) {
var key = keys[i];
console.log(key); // I want all the keys in order, i.e. => obj1, obj2.. and so on
var value = response[key].data;
switch(key) {
...
}
}
}
function getError(error) {
console.log(error);
}
}
EDIT:
I tried this way also:
var promises = {};
return $http.get('/admin/http1.json').then(function (value) {
promises['obj1'] = value;
})
.then(function (result) {
return $http.get('/admin/http2.json').then(function (value) {
promises['obj2'] = value;
});
}).then(function (result) {
return $http.get('/admin/http3.json').then(function (value) {
promises['obj3'] = value;
});
});
return $q.all(promises);
Using $q.all will resolve each promise in no particular order. If you want them to execute after each promise has been resolve, use promise chaining.
function getPromises(id) {
var getObjA = function () {
return $http.get('http1');
};
var getObjB = function () {
return $http.get('http2');
};
var getObjC = function () {
return $http.get('http3');
};
var getObjD = function () {
return $http.get('http4', { params: { 'id': id } });
};
var getObjE = function () {
return $http.get('http5');
};
var getObjF = function () {
return $http.get('http5', { params: { 'id': id } });
};
return getObjA()
.then(getObjB)
.then(getObjC)
.then(getObjD)
.then(getObjE)
.then(getObjF);
}
Edit: as an additional info, you can catch any error in any of those promise by placing a catch statement here
getPromises("id")
.then(<success callback here>)
.catch(<error callback that will catch error on any of the promises>);
Meaning, once a promise fails, all the succeeding promises below wouldn't be executed and will be caught by your catch statement
Edit 2
Mistake, I just copied you code above without realizing it was an object. LOL.
promises = [
$http.get('http1'),
$http.get('http2'),
$http.get('http3'),
$http.get('http4', { params: { 'id': id } }),
$http.get('http5'),
$http.get('http6', { params: { 'id': id } })
]
Edit 1
Sorry I didn't notice the comments Jared Smith is correct.
Object keys are inherently unordered. Use an array instead.
Edit 0
Object keys wont be ordered. Use array on declaring your promises.
promises = [
$http.get('http1'),
$http.get('http2'),
$http.get('http3'),
$http.get('http4', { params: { 'id': id } }),
$http.get('http5'),
$http.get('http6', { params: { 'id': id } })
]
$q.all(promises)
.then(functions(resolves){
// resolves here is an array
}).catch(function(err){
// throw err
});
I wrote an angular service which querys a db and should return the Categories:
(function() {
'use strict';
angular.module('budget')
.service('CategoriesService', ['$q', CategoriesService]);
function CategoriesService($q) {
var self = this;
self.loadCategories = loadCategories;
self.saveCategorie = saveCategorie;
self.datastore = require('nedb');
self.db = new self.datastore({ filename: 'datastore/default.db', autoload : true});
function saveCategorie (categorie_name) {
var entry = {name: categorie_name,
type: 'categorie'}
self.db.insert(entry);
};
function loadCategories () {
self.db.find({type: 'categorie'}, function (err, docs) {
var categories = docs;
return categories;
});
};
return {
loadCategories: self.loadCategories,
saveCategorie: self.saveCategorie
};
}
})();
When I console.log inside the function loadCategories() it returns me an array of 6 objects (the objects from the database) but outside of the function it just gives me undefined.
I am calling via the controller with CategoriesService.loadCategories()
So I think I might have to do something thas called promise but Iam not sure about that.
How can I get acctual data back from this service?
First of all you don't need to return anything from the service factory recipe, you just need to assign a method to the this variable.
At least, you need:
// service.js
self.loadCategories = function() {
var deferred = $q.defer();
db.find({type: 'categorie'}, function (err, docs) {
deferred.resolve(docs);
});
return deferred.promise;
};
// controller.js
service
.loadCategories()
.then(function(categories) {
$scope.categories = categories;
})
;
you need to return your promise first so just add one more return and you are good to go...
function loadCategories () {
// you need to return promise first and you can resolve your promise in your controller
return self.db.find({type: 'categorie'}, function (err, docs) {
var categories = docs;
return categories;
});
};
I am trying to perform a search on my current collection and if the results aren't retrieved i am trying to query my search api
Collection:
var Backbone = require('backbone'),
_ = require('underscore'),
Urls = require('../../libs/urls'),
services = require('../../libs/services'),
skuListModel = require('../../models/sku/SkuListModel');
var SkuListCollection= Backbone.Collection.extend({
model: skuListModel,
sync: function (method, model, options) {
options = _.defaults({}, options, {
readUrl: Urls.sku.list
});
return services.sync.call(model, method, model, options);
}
});
View
searchData: function (e) {
var self = this;
var models = this.skuCollection.filter(function (item) {
return item.get("sku_code").indexOf(e.target.value) > -1
});
console.log(models);
if (models != null) {
self.skuCollection.set(models);
}
else {
self.skuCollection.fetch({
data: {
search_string: e.target.value
}
}).then(function (response) {
console.log(response);
//self.skuCollection.add(self.skuSearchCollection.toJSON(), { silent: true });
});
}
}
My question effectively is how do i modify my current collection to store the retrieved results and if my solution seems effective.
Move your filtering logic to the collection
Use promises to unify your response : an immediately resolved deferred if you find models, the xhr object if you have to fetch the data
Customize the behavior of fetch via the set options, e.g {remove: false} to keep the existing models
These points lead to a collection definition :
var SkuListCollection = Backbone.Collection.extend({
skus: function(code) {
var self = this;
var filtered = function() {
return self.filter(function (item) {
return item.get("sku_code").indexOf(code) !== -1;
});
};
var models = filtered();
if (models.length) {
// models found : define a promise and resolve it
var dfd = $.Deferred();
dfd.resolve(models);
return dfd.promise();
} else {
// models missing: fetch and add them
return this.fetch({
remove: false,
data: {
search_string: code
}
}).then(filtered);
}
}
});
Your view would then be rewired as :
searchData: function (e) {
this.skuCollection.skus(e.target.value).then(function(models) {
// do what you have to do with the filtered models
});
}
And a demo http://jsfiddle.net/nikoshr/84342xer/1/
I've got a factory that sends a POST request to get some JSON key-value pairs:
.factory('Rest', ['$resource',
function($resource) {
// returns JSON key-value pairs, e.g. "{'foo', 'bar'}"
return $resource('rest/get', {}, {
get: {
method: 'POST'
}
});
}])
I've got another factory intended to be exposed to controllers in order to access a key-value pair given its key:
.factory('Pairs', ['Rest',
function(Rest) {
var pairs;
Rest.get(function(response) {
pairs = response;
});
return {
get: function(key) {
return pairs[key];
}
};
}])
The problem is that, when I call Pairs.get('foo'), the pairs object of the Pairs factory is not initialized yet (since Rest.get is asynchronous), and thus results in a TypeError: Cannot read property 'foo' of undefined:
.controller('AnyController', ['Pairs',
function (Pairs) {
console.log(Pairs.get('foo')); // error
}])
Any idea how to solve this?
As you stated in your question, Rest.get is asynchronous, so your Pairs.get has to be asynchronous too. You can implement it as the following:
.factory('Pairs', ['Rest', '$q',
function(Rest, $q) {
var pairs;
var deferredList = [];
Rest.get(function(response) {
pairs = response;
angular.forEach(deferredList, function(o) {
o.deferred.resolve(pairs[o.key]); // resolve saved defer object
});
deferredList = null; // we don't need the list anymore
});
return {
get: function(key) {
if (pairs) {
return $q.when(pairs[key]); // make immediate value as a promise
}
var deferred = $q.defer(); // create a deferred object which will be resolved later
deferredList.push({ // save both key and deferred object for later
key: key,
deferred: deferred
});
return deferred.promise;
}
};
}])
Then use it like this:
Pairs.get('foo').then(function(value) {
console.log(value);
});
You want to wrap your async function in a promise. Here's how I've done something similar.
Note: safeApply triggers the $digest cycle, if necessary, so that angular can react to any data changes it might be watching.
var safeApply = function (scope, fn) {
if (scope.$$phase || scope.$root.$$phase) {
fn();
} else {
scope.$apply(fn);
}
};
ret.getAll = function(type) {
var deferred = $q.defer();
var where = "apm_type = '" + type + "'";
query(type, where, function(err, response) {
var objs = [];
if (err) {
safeApply($rootScope, function() { deferred.reject(err);});
} else {
safeApply($rootScope, function() { deferred.resolve(response);});
}
});
return deferred.promise;
};