I already looked for similar questions, but they are related to JQuery or any other library.
First, I wrote this:
const printIn1Sec = (value) => {
return new Promise(resolve => {
setTimeout(() => {
console.log(value);
resolve();
}, 1000)
});
};
And used it in this way:
printIn1Sec(1)
.then(() => printIn1Sec(2))
.then(() => printIn1Sec(3));
I think then is very important, because it allows us to execute something as soon as the promise is resolved.
But I was looking for something like this:
printIn1Sec(1)
.printIn1Sec(2)
.printIn1Sec(3);
I noticed I needed an object with access to this printIn1Sec method. So I defined a class:
class Printer extends Promise {
in1Sec(v) {
return this.then(() => this.getPromise(v));
}
getPromise(value) {
return new Printer(resolve => {
setTimeout(() => {
console.log(value);
resolve();
}, 1000)
})
}
}
And used it this way:
Printer.resolve().in1Sec(1).in1Sec(2).in1Sec(3);
I had to resolve the Promise from the beginning, in order to the start the chain. But it still bothers me.
Do you think, is there a way to get it working like the following?
printIn1Sec(1).printIn1Sec(2).printIn1Sec(3);
I was thinking in a new class or method, that could receive these values, store them, and finally start resolving the chain.
But it would require to call an aditional method at the end, to init with the flow.
If you really wanted to create a chainable interface as in your question, this would do it:
const printIn1Sec = (function() {
function setTimeoutPromise(timeout) {
return new Promise(resolve => setTimeout(resolve, 1000));
}
function printIn1Sec(value, promise) {
const newPromise = promise
.then(() => setTimeoutPromise(1000))
.then(() => console.log(value));
return {
printIn1Sec(value) {
return printIn1Sec(value, newPromise);
},
};
}
return value => printIn1Sec(value, Promise.resolve());
}());
printIn1Sec(1)
.printIn1Sec(2)
.printIn1Sec(3);
We just hide all the promise creation and chaining in an internal function. I split the code into smaller functions to make it a bit nicer looking.
You can try async and await
const printIn1Sec = (value) => {
return new Promise(resolve => {
setTimeout(() => {
console.log(value);
resolve();
}, 1000)
});
};
async function fun(){
await printIn1Sec(1);
await printIn1Sec(2);
await printIn1Sec(3);
}
fun();
Related
I am trying to make a method sleep(delay) in method chaining. For this I am using setTimeout with Promise. This will require any method following the sleep to be inside the then.
Right now I am calling the function like
lazyMan("John", console.log).eat("banana").sleep(5).then(d => {d.eat("apple");});.
Here is my code
function lazyMan(name, logFn) {
logFn(name);
return {
eat: function(val) {
console.log(val);
return this;
},
sleep: function(timer) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`Sleeping for ${timer} seconds`);
resolve(this);
}, timer * 1000);
}).then(d => this);
}
};
}
lazyMan("John", console.log)
.eat("banana")
.sleep(5)
.then(d => {
d.eat("apple");
});
Is there a way I can modify my function to call it like lazyMan("John", console.log).eat("banana").sleep(5).eat("apple") and get the output in same order
I have gone through Add a sleep method in a object method chain(JS)
You can keep a promise for your "task queue", so anything that needs to be done, will be added onto there via .then(). This provides a fluent API for scheduling stuff.
function lazyMan(name, logFn) {
logFn(name);
let taskQueue = Promise.resolve();
const addTask = f => {
taskQueue = taskQueue.then(f);
}
return {
eat: function(val) {
addTask(() => console.log(`Eating [${val}]`));
return this;
},
sleep: function(timer) {
addTask(() => new Promise((resolve, reject) => {
console.log(`Start sleeping for ${timer} seconds`);
setTimeout(() => {
console.log(`End sleeping for ${timer} seconds`);
resolve();
}, timer * 1000);
}))
return this;
}
};
}
lazyMan("John", console.log)
.eat("banana")
.sleep(5)
.eat("apple");
Note that this change means that every action is technically asynchronous. However, that's at least uniform, so it's less of a chance of a surprise when keeping it in mind.
I'm trying to do asynchronous setters using async/await keywords.
Here some fakes database functions that takes time
function getProjectFromDatabase() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('My cool project!'), 500) // 500ms latency
});
}
function setProjectToDatabase(projectName) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('set!'), 500) // 500ms latency
});
}
Here is an example of implementation for the user
let user = {
// Getter
get project() {
return (async () => {
return await getProjectFromDatabase();
})();
},
// Setter
set project(projectName) {
return (async () => {
return await setProjectToDatabase(projectName);
})();
},
// Method
setProject(projectName) {
return (async () => {
return await setProjectToDatabase(projectName);
})();
}
};
And here is an example of use
(async function() {
console.log(await user.project); // Getter works!
await user.setProject('My new cool project!'); // Method works!
await (user.project = 'Another project'); // Setter doesn't work...
})();
But the return value from the setter function seems ignored.
How could I do that?
The assignment expression always evaluates to its right-hand side.
a.b.c = "This is what it gets evaluated to"
there is no way to change that.
Normally a setter sets some value and you don't care about the return value. In a traditional object this would be some other property (probably not intended to be used directly). Translated to something like a DB, the setter would post an INSERT or UPDATE and the new value would be set.
Your code in the setter isn't actually setting anything. If this were an actual DB call you would save some value in the database and then the next call to the getter would produce the new value. If you add something like this to the fan DB call, you will get something closer to traditional getter/setter logic:
const a_user = {project: 'My cool project!'} // some fake db object
function getProjectFromDatabase() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(a_user.project), 500) // 500ms latency
});
}
function setProjectToDatabase(projectName) {
return new Promise((resolve, reject) => {
setTimeout(() => {
a_user.project = projectName // actually set something
resolve(a_user.project) // caller of setter doesn't care about return value, but we still need to resolve so async works.
}, 500) // 500ms latency
});
}
let user = {
// Getter
get project() {
return (async () => {
return await getProjectFromDatabase();
})();
},
// Setter
set project(projectName) {
return (async () => {
return await setProjectToDatabase(projectName);
})();
},
};
(async function() {
console.log(await user.project); // Getter works!
await (user.project = 'Another project'); //
console.log(await user.project); // new value has been set
})();
I discovered javascript promises recently. An advertised benefit is clean nesting by chaining then clauses.
My code works as expected, but nesting grows just as ugly as when I used callbacks. Is there a better way to use chaining of then to remove all this nesting? Note I need task n to complete before anything in task n+1 can start.
The very simple fixed example
'use strict';
function P1() {
return new Promise((resolve) => {
console.log("starting 1")
setTimeout(() => {
console.log("done 1")
resolve();
}, 100)
})
}
function P2() {
return new Promise((resolve) => {
console.log("must start 2 only after 1 is done")
setTimeout(() => {
console.log("done 2")
resolve();
}, 50)
})
}
function P3() {
return new Promise((resolve) => {
console.log("must start 3 only after 3 is done")
setTimeout(() => {
console.log("done 3")
resolve();
}, 10)
})
}
console.log("this works, but if list was long, nesting would be terribly deep");
// start 1, done 1, start 2, done 2, start 3, done 3.
P1().then(() => {
P2().then(() => {
P3()
})
})
Based on the feedback I should have done
P1().then(() => {
return P2()
}).then(() => {
return P3()
}).catch(() => { console.log("yikes something failed" )})
The real code receives an array of stuff to process sequentially.
The suggested format above appears suitable only when the sequence of steps is specified as code. Seems like there should some kind of Promise.do_these_sequentialy, rather than my code constructing the promise chain explicitly. As follows:
'use strict';
function driver(single_command) {
console.log("executing " + single_command);
// various amounts of time to complete command
return new Promise((resolve) => {
setTimeout(() => {
console.log("completed " + single_command);
resolve()
}, Math.random()*1000)
})
}
function execute_series_of_commands_sequentialy(commands) {
var P = driver(commands.shift());
if (commands.length > 0) {
return P.then(() => { return execute_series_of_commands_sequentialy(commands) })
} else {
return P
}
}
execute_series_of_commands_sequentialy([1, 2, 3, 4, 5, 6, 7, 8, 9]).then(() => {
console.log("test all done")
})
P1()
.then(() => P2())
.then(() => P3())
You can make your code more flat.
Also explicit construction is an antipattern
You misunderstood how Promises work. You can chain return values as well as Promise instances and pass them further along the chain:
P1()
.then(() => P2())
.then(() => P3())
There's no need to nest them.
Personally I like how this format looks and is what I use
foo(){
P1().then(()=>{
return P2();
}).then(()=>{
return P3();
}).catch((err)=>{
//handle errors
});
}
Have a look at async/await that greatly simplifies the writing of promises.
JavaScript’s Async/Await Blows Promises Away
Basically, it consists in writing async functions like sync code:
async function P(number) {
return new Promise((resolve) => {
console.log("starting "+number)
setTimeout(() => {
console.log("done "+number)
resolve();
}, 800)
})
}
/* Or the ES6 version :
const P = async (number) => new Promise((resolve) => { ... })
*/
async function run(){
await P(1)
await P(2)
await P(3)
console.log("All done!")
}
run()
I want to do a sort of Worker that executes a list of functions that can be promises or not. For that Worker, I use promise. Here is a exemple:
class PromiseChainer {
constructor() {
this.promise = Promise.resolve();
}
addToChain(f) {
this.promise = this.promise.then(() => Promise.resolve(f));
}
getPromise() {
return this.promise;
}
}
I want to easly add functions or promises to the chain and be sure theses function will be executed synchronously.
I tested with 2 functions:
const p = new Promise(resolve =>
setTimeout(() => resolve(console.log('promise resolved')), 500));
const f = () => console.log('value resolved')
And finally I've a:
const promiseChainer = new PromiseChainer();
promiseChainer.addToChain(f);
promiseChainer.addToChain(p);
promiseChainer.getPromise().then(() => {
console.log('finished');
});
in order to test if my functions are executed in the right order.
The problem is: I can't get this code working with Promises and Functions :
addToChain(f) {
this.promise = this.promise.then(() => Promise.resolve(f));
}
Works only with Promise (Value resolved is never displayed)
addToChain(f) {
this.promise = this.promise.then(() => f);
}
Works only with Promise (Value resolved is never displayed)
addToChain(f) {
this.promise = this.promise.then(f);
}
Works only with Functions (Promise is resolved after the message: finished).
There is a way to accomplish that I want without a if on the type of the parameter ?
Here is my playground: https://jsbin.com/vuxakedera/edit?js,console
Thanks
You're over complicating something very simple - Promises chain directly, there is no need to try to do something like what you have implemented with PromiseChainer
const p = new Promise(resolve =>
setTimeout(() => resolve(console.log('promise resolved')), 500));
const f = () => console.log('value resolved')
var chain = Promise.resolve()
.then(f)
.then(() => p)
.then(() => {
console.log('finished');
});
I have the following 2 functions, each returns a Promise:
const getToken = () => {
return new Promise((resolve, reject) => {
fs.readFile('token.txt', (err, data) => {
if (err) { return reject(err) }
if (!tokenIsExpired(data.token)) {
return resolve(data.token)
} else {
return requestNewToken()
}
})
})
}
const requestNewToken = () => {
return new Promise((resolve, reject) => {
restClient.get(url, (data, res) => {
fs.writeFile('tokenfile.txt', data.token, err => {
resolve(data.token)
})
})
})
}
function1()
.then(value => {
console.log('taco')
})
.catch(err => {
console.log(err)
})
So function1 runs, and (depending on some condition), it sometimes returns function2, which is returning another Promise. In this code, when function2 is called, the console.log('taco') never runs. Why is this? I thought that if you return a Promise from within a Promise, the resolved value of the nested Promise is what is resolved at the top level.
In order for me to get this to work, I have to do this:
const getToken = () => {
return new Promise((resolve, reject) => {
if (!tokenIsExpired()) {
return resolve(getToken())
} else {
return requestNewToken ()
.then(value => {
resolve(value)
})
}
})
}
That works, but it seems like I'm doing something wrong. It seems like there should be a more elegant way to handle/structure this.
You're right that promises auto-unwrap, but in this case you're returning from inside a promise constructor, which is ignored, you need to invoke either resolve or reject instead of using return. I think this might be the solution you're looking for:
const function1 = () => {
return new Promise((resolve, reject) => {
if (someCondition) {
resolve('foobar')
} else {
resolve(function2());
}
})
}
Inside a promise constructor, you need to call resolve or reject, which are equivalent to using return or throw from inside a then callback.
If you find this distinction confusing (I do), you should avoid the promise constructor entirely by just beginning a new chain with Promise.resolve, like this:
const function1 = () => {
return Promise.resolve().then(() => {
if (someCondition) {
return 'foobar';
} else {
return function2();
}
})
}
const function2 = () => {
return new Promise((resolve, reject) => {
resolve('hello world')
})
}
someCondition = false;
function1()
.then(value => {
console.log(value)
})
With your updated code, I recommend using a library to wrap APIs, rather than accessing the promise constructor yourself. For example, using bluebird's promisify:
const bluebird = require('bluebird');
const readFile = bluebird.promisify(fs.readFile);
const writeFile = bluebird.promisify(fs.writeFile);
const getUrl = bluebird.promisify(restClient.get, {multiArgs:true});
const getToken = () => {
return readFile('token.txt')
.then((data) => {
if(!tokenIsExpired(data.token)) {
return data.token;
} else {
return requestNewToken();
}
});
};
const requestNewToken = () => {
return getUrl(url)
.then(([data, res]) => {
return writeFile('tokenFile.txt', data.token)
.then(() => data.token);
});
};
I've remained faithful to your source code, but I'll note there may be a bug to do with writing data.token, and later trying to read the token property in that file.
Why use a library instead of the Promise constructor?
It allows you to write code which deals only with promises, which is (hopefully) easier to understand
You can be confident that callback APIs are correctly converted without losing errors. For example, if your tokenIsExpired function throws an error, using your promise constructor code, it would be lost. You would need to wrap all of your inner callback code in try {} catch(e) {reject(e)}, which is a hassle and easily forgotten.