I have a service where I exchange data, in this service I keep a promise created by $interval, nothing fancy:
$rootScope.recursivePosition = null;
$rootScope.trackMe = function(){
var extensionName = $state.current.extensionName;
if ($rootScope.tracking === false) {
$rootScope.tracking = true;
$rootScope.recursivePosition = $interval(function(){
someService.getAllPositions($rootScope.content[extensionName]);
}, 2000);
} else {
$interval.cancel($rootScope.recursivePosition);
console.log("recursivePosition cancel");
console.dir($rootScope.recursivePosition);
$rootScope.tracking = false;
}
};
The thing is, inside that service I have another promise (from $cordovaGeolocation) when I cancel the first promise ($rootScope.recursivePosition) it still works for a while, like 4 seconds more. Can I control this behavior ?
A promise inside a promise can't be cancelled. But a promise derived from that promise can be cancelled.
function getAllPositions(x) {
var defer = $q.defer();
var derivedPromise = defer.promise;
derivedPromise.cancel = function () {
defer.reject('cancelled');
});
$cordovaGeolocation(x)
.then(function onSuccess(value) {
defer.resolve(value);
}).catch(function onReject(error) {
defer.reject(error);
});
return derivedPromise;
};
The above example returns a promise derived from the $cordovaGeolocation promise. Attached to it is a method named cancel which rejects the promise if called before $cordovaGeolocation resolves.
Asynchronous operations started by $cordovaGeolocation can't be stopped but operations chained from its promise can be cancelled.
I fully understand that similar questions have been asked before but I don't get it running. I need a chain of promises and I need to wait until all promises are resolved.
My issue is that I need to call different promises based on the outcome of another promise :-(
So based on the outcome of promise2 my promise4 is EITHER $translate.use OR it is $translate.refresh.
This is what I have so far (simplified):
var promise1 = someService.get({}).$promise.then(function (result) {
// do stuff
});
var promise2 = anotherService.getPromise().then(function (result) {
var properties = result[0];
// do stuff
return properties;
});
var promise3 = promise2.then(function(properties){
// using $translate (angular-translate) here which is async as well
var userLanguage = properties.language;
if (userLanguage !== $translate.preferredLanguage()) {
// either this is the 4th promise
$translate.use(userLanguage).then(function (myVar) {
// ...
});
} else {
// or this is the 4th promise
$translate.refresh().then(function (myVar) {
// ...
});
}
});
var loadPromises = {
promise1: promise1
promise2: promise2
promise3: promise3
promise4: ???
};
$q.all(loadPromises).then(function (result) {
// anything done
});
You don't really need to monitor promise3 and promise4, all you need is promise1 and promise2. promise3 becomes next step of the promise2. Just note how you return new promise (either return $translate.use or return $translate.refresh) from promise2 then part :
var promise1 = someService.get({}).$promise.then(function(result) {
// do stuff
});
var promise2 = anotherService.getPromise().then(function(result) {
var properties = result[0];
// do stuff
return properties;
})
.then(function(properties) {
// using $translate (angular-translate) here which is async as well
var userLanguage = properties.language;
if (userLanguage !== $translate.preferredLanguage()) {
// either this is the 4th promise
return $translate.use(userLanguage).then(function(myVar) {
// ...
});
} else {
// or this is the 4th promise
return $translate.refresh().then(function(myVar) {
// ...
});
}
});
var loadPromises = {
promise1: promise1,
promise2: promise2
};
$q.all(loadPromises).then(function(result) {
// anything done
});
If I understand your code well enough, I think you only need to return the inner promise inside of promise3. In your example, both promise1 and promise2 won't be resolved until the service is done. Since promise3 depends on promise2 it won't finish until promise2 resolved. I believe $q.all keeps going until all promises are complete, even promises returned by promises. Since promise3 returns a promise, promise3 won't be considered resolved until the inner promise is resolved. So, I think adding a couple return statements is all that you need:
var promise1 = someService.get({}).$promise.then(function (result) {
// do stuff
});
var promise2 = anotherService.getPromise().then(function (result) {
var properties = result[0];
// do stuff
return properties;
});
var promise3 = promise2.then(function(properties){
// using $translate (angular-translate) here which is async as well
var userLanguage = properties.language;
if (userLanguage !== $translate.preferredLanguage()) {
// either this is the 4th promise
//NOTE: added return here
return $translate.use(userLanguage).then(function (myVar) {
// ...
});
} else {
// or this is the 4th promise
//NOTE: added return here
return $translate.refresh().then(function (myVar) {
// ...
});
}
});
var loadPromises = {
promise1: promise1,
promise2: promise2,
promise3: promise3
};
$q.all(loadPromises).then(function (result) {
// anything done
});
Problem 1: only one API request is allowed at a given time, so the real network requests are queued while there's one that has not been completed yet. An app can call the API level anytime and expecting a promise in return. When the API call is queued, the promise for the network request would be created at some point in the future - what to return to the app? That's how it can be solved with a deferred "proxy" promise:
var queue = [];
function callAPI (params) {
if (API_available) {
API_available = false;
return doRealNetRequest(params).then(function(data){
API_available = true;
continueRequests();
return data;
});
} else {
var deferred = Promise.defer();
function makeRequest() {
API_available = false;
doRealNetRequest(params).then(function(data) {
deferred.resolve(data);
API_available = true;
continueRequests();
}, deferred.reject);
}
queue.push(makeRequest);
return deferred.promise;
}
}
function continueRequests() {
if (queue.length) {
var makeRequest = queue.shift();
makeRequest();
}
}
Problem 2: some API calls are debounced so that the data to be sent is accumulated over time and then is sent in a batch when a timeout is reached. The app calling the API is expecting a promise in return.
var queue = null;
var timeout = 0;
function callAPI2(data) {
if (!queue) {
queue = {data: [], deferred: Promise.defer()};
}
queue.data.push(data);
clearTimeout(timeout);
timeout = setTimeout(processData, 10);
return queue.deferred.promise;
}
function processData() {
callAPI(queue.data).then(queue.deferred.resolve, queue.deferred.reject);
queue = null;
}
Since deferred is considered an anti-pattern, (see also When would someone need to create a deferred?), the question is - is it possible to achieve the same things without a deferred (or equivalent hacks like new Promise(function (resolve, reject) {outerVar = [resolve, reject]});), using the standard Promise API?
Promises for promises that are yet to be created
…are easy to build by chaining a then invocation with the callback that creates the promise to a promise represents the availability to create it in the future.
If you are making a promise for a promise, you should never use the deferred pattern. You should use deferreds or the Promise constructor if and only if there is something asynchronous that you want to wait for, and it does not already involve promises. In all other cases, you should compose multiple promises.
When you say
When the API call is queued, the promise for the network request would be created at some point in the future
then you should not create a deferred that you can later resolve with the promise once it is created (or worse, resolve it with the promises results once the promise settles), but rather you should get a promise for the point in the future at which the network reqest will be made. Basically you're going to write
return waitForEndOfQueue().then(makeNetworkRequest);
and of course we're going to need to mutate the queue respectively.
var queue_ready = Promise.resolve(true);
function callAPI(params) {
var result = queue_ready.then(function(API_available) {
return doRealNetRequest(params);
});
queue_ready = result.then(function() {
return true;
});
return result;
}
This has the additional benefit that you will need to explicitly deal with errors in the queue. Here, every call returns a rejected promise once one request failed (you'll probably want to change that) - in your original code, the queue just got stuck (and you probably didn't notice).
The second case is a bit more complicated, as it does involve a setTimeout call. This is an asynchronous primitive that we need to manually build a promise for - but only for the timeout, and nothing else. Again, we're going to get a promise for the timeout, and then simply chain our API call to that to get the promise that we want to return.
function TimeoutQueue(timeout) {
var data = [], timer = 0;
this.promise = new Promise(resolve => {
this.renew = () => {
clearTimeout(timer);
timer = setTimeout(resolve, timeout);
};
}).then(() => {
this.constructor(timeout); // re-initialise
return data;
});
this.add = (datum) => {
data.push(datum);
this.renew();
return this.promise;
};
}
var queue = new TimeoutQueue(10);
function callAPI2(data) {
return queue.add(data).then(callAPI);
}
You can see here a) how the debouncing logic is completely factored out of callAPI2 (which might not have been necessary but makes a nice point) and b) how the promise constructor only concerns itself with the timeout and nothing else. It doesn't even need to "leak" the resolve function like a deferred would, the only thing it makes available to the outside is that renew function which allows extending the timer.
When the API call is queued, the promise for the network request would
be created at some point in the future - what to return to the app?
Your first problem can be solved with promise chaining. You don't want to execute a given request until all prior requests have finished and you want to execute them serially in order. This is exactly the design pattern for promise chaining. You can solve that one like this:
var callAPI = (function() {
var p = Promise.resolve();
return function(params) {
// construct a promise that chains to prior callAPI promises
var returnP = p.then(function() {
return doRealNetRequest(params);
});
// make sure the promise we are chaining to does not abort chaining on errors
p = returnP.then(null, function(err) {
// handle rejection locally for purposes of continuing chaining
return;
});
// return the new promise
return returnP;
}
})();
In this solution, a new promise is actually created immediately with .then() so you can return that promise immediately - there is no need to create a promise in the future. The actual call to doRealNetRequest() is chained to this retrurned .then() promise by returning its value in the .then() handler. This works because, the callback we provide to .then() is not called until some time in the future when the prior promises in the chain have resolved, giving us an automatic trigger to execute the next one in the chain when the prior one finishes.
This implementation assumes that you want queued API calls to continue even after one returns an error. The extra few lines of code around the handle rejection comment are there to make sure the chain continues even where a prior promise rejects. Any rejection is returned back to the caller as expected.
Here's a solution to your second one (what you call debounce).
the question is - is it possible to achieve the same things without a
deferred (or equivalent hacks like new Promise(function (resolve,
reject) {outerVar = [resolve, reject]});), using the standard Promise
API?
As far as I know, the debouncer type of problem requires a little bit of a hack to expose the ability to trigger the resolve/reject callbacks somehow from outside the promise executor. It can be done a little cleaner than you propose by exposing a single function that is within the promise executor function rather than directly exposing the resolve and reject handlers.
This solution creates a closure to store private state that can be used to manage things from one call to callAPI2() to the next.
To allow code at an indeterminate time in the future to trigger the final resolution, this creates a local function within the promise executor function (which has access to the resolve and reject functions) and then shares that to the higher (but still private) scope so it can be called from outside the promise executor function, but not from outside of callAPI2.
var callAPI2 = (function() {
var p, timer, trigger, queue = [];
return function(data) {
if (!p) {
p = new Promise(function(resolve) {
// share completion function to a higher scope
trigger = function() {
resolve(queue);
// reinitialize for future calls
p = null;
queue = [];
}
}).then(callAPI);
}
// save data and reset timer
queue.push(data);
clearTimeout(timer);
setTimeout(trigger, 10);
return p;
}
})();
You can create a queue, which resolves promises in the order placed in queue
window.onload = function() {
(function(window) {
window.dfd = {};
that = window.dfd;
that.queue = queue;
function queue(message, speed, callback, done) {
if (!this.hasOwnProperty("_queue")) {
this._queue = [];
this.done = [];
this.res = [];
this.complete = false;
this.count = -1;
};
q = this._queue,
msgs = this.res;
var arr = Array.prototype.concat.apply([], arguments);
q.push(arr);
msgs.push(message);
var fn = function(m, s, cb, d) {
var j = this;
if (cb) {
j.callback = cb;
}
if (d) {
j.done.push([d, j._queue.length])
}
// alternatively `Promise.resolve(j)`, `j` : `dfd` object
// `Promise` constructor not necessary here,
// included to demonstrate asynchronous processing or
// returned results
return new Promise(function(resolve, reject) {
// do stuff
setTimeout(function() {
div.innerHTML += m + "<br>";
resolve(j)
}, s || 0)
})
// call `cb` here, interrupting queue
.then(cb ? j.callback.bind(j, j._queue.length) : j)
.then(function(el) {
console.log("queue.length:", q.length, "complete:", el.complete);
if (q.length > 1) {
q.splice(0, 1);
fn.apply(el, q[0]);
return el
} else {
el._queue = [];
console.log("queue.length:", el._queue.length
, "complete:", (el.complete = !el._queue.length));
always(promise(el), ["complete", msgs])
};
return el
});
return j
}
, promise = function(t) {
++t.count;
var len = t._queue.length,
pending = len + " pending";
return Promise.resolve(
len === 1
? fn.apply(t, t._queue[0]) && pending
: !(t.complete = len === 0) ? pending : t
)
}
, always = function(elem, args) {
if (args[0] === "start") {
console.log(elem, args[0]);
} else {
elem.then(function(_completeQueue) {
console.log(_completeQueue, args);
// call any `done` callbacks passed as parameter to `.queue()`
Promise.all(_completeQueue.done.map(function(d) {
return d[0].call(_completeQueue, d[1])
}))
.then(function() {
console.log(JSON.stringify(_completeQueue.res, null, 2))
})
})
}
};
always(promise(this), ["start", message, q.length]);
return window
};
}(window));
window
.dfd.queue("chain", 1000)
.dfd.queue("a", 1000)
.dfd.queue("b", 2000)
.dfd.queue("c", 2000, function callback(n) {
console.log("callback at queue index ", n, this);
return this
}, function done(n) {
console.log("all done callback attached at queue index " + n)
})
.dfd.queue("do", 2000)
.dfd.queue("other", 2000)
.dfd.queue("stuff", 2000);
for (var i = 0; i < 10; i++) {
window.dfd.queue(i, 1000)
};
window.dfd.queue.apply(window.dfd, ["test 1", 5000]);
window.dfd.queue(["test 2", 1000]);
var div = document.getElementsByTagName("div")[0];
var input = document.querySelector("input");
var button = document.querySelector("button");
button.onclick = function() {
window.dfd.queue(input.value, 0);
input.value = "";
}
}
<input type="text" />
<button>add message</button>
<br>
<div></div>
I'm using a for each to process a list and i want that element n to be executed only when element n-1 is over:
var elements = ["stuff1", "stuff2", "stuff3"];
elements.forEach(function(element){
someAsyncFunction(element, function(){
console.log('do more stuff');
});
});
I need that they wait for each other and execute in the right order.
EDIT : I bumped into process.nextTick(), but I'm not sure if it guarantees the waiting and order.
Just store the elements in an array exactly the same way as you did in your question. Then use elements.shift() to retrieve and remove the first element.
var elements = ["stuff1", "stuff2", "stuff3"];
(function next () {
if (!elements.length) {
return;
}
var element = elements.shift();
someAsyncFunction(element, function (err, result) {
…
next();
});
})();
A nice way is to make use of a promise library like Q or Bluebird and then implement a promiseWhile like this.
var Promise = require('bluebird');
var promiseWhile = function(condition, action) {
var resolver = Promise.defer();
var loop = function() {
if (!condition()) return resolver.resolve();
return Promise.cast(action())
.then(loop)
.catch(resolver.reject);
};
process.nextTick(loop);
return resolver.promise;
};
Usage:
var sum = 0,
stop = 10;
promiseWhile(function() {
// Condition for stopping
return sum < stop;
}, function() {
// Action to run, should return a promise
return new Promise(function(resolve, reject) {
// Arbitrary 250ms async method to simulate async process
// In real usage it could just be a normal async event that
// returns a Promise.
setTimeout(function() {
sum++;
// Print out the sum thus far to show progress
console.log(sum);
resolve();
}, 250);
});
}).then(function() {
// Notice we can chain it because it's a Promise,
// this will run after completion of the promiseWhile Promise!
console.log("Done");
});
Is there such a thing as a when clause for mpromise/mongoose? I'm looking to do something lke this without having to write my own wrapper for mpromise.
$.when(jQueryPromise1,jQueryPromise3,jQueryPromise3).done(function(r1,r2,r3) {
// success code
}.fail(function(err1,err2,err3) {
//failure code
});
I realize chaining exists, that's not what I want. I'm looking for a mechanism in mpromise/mongoose that will execute when all promises have been completed.
Here's a sample implementation of when:
function when(/* promise list */) {
var promises = [].slice.call(arguments),
whenPromise = new Promise,
results = new Array(promises.length),
remaining = promises.length,
done = false,
finish = function() {
done = true;
};
whenPromise.onFulfill(finish).onReject(finish);
promises.forEach(function(promise) {
promise.onFulfill(function(result) {
if (!done) {
// index of result should correspond to original index of promise
results[promises.indexOf(promise)] = result;
if (--remaining == 0) {
// fulfill when all are fulfilled
whenPromise.fulfill.apply(whenPromise, results);
}
}
}).onReject(function(err) {
if (!done) {
// reject when one is rejected (a la jQuery)
whenPromise.reject(err);
}
});
});
}