I am trying to expand my knowledge (beginner stage). Basically, I would like to use promises to write new email to my user. I have some code base in my play ground project, but my function is not stopping on then.
This is the function that should write to Database:
changeEmailAddress(user, newEmail) {
new Promise((resolve, reject) => {
user.setEmail(newEmail);
userRepository.saveUser(user).then(() => {
return resolve();
}).catch(e => {
return reject(e);
});
}
);
}
And if I am not mistaken, this is how I should use it:
changeEmailAddress(user, "hello#there.com").then(function () {
//it never comes in here :(
})
I have similar functions working on the user, but my function is not coming in to 'then'
You're committing the explicit promise constructor anti-pattern. Your code need be no more complicated than
changeEmailAddress(user, newEmail) {
user.setEmail(newEmail);
return userRepository.saveUser(user);
}
Making sure, of course, to not forget the return!
You are not returning the new Promise.
changeEmailAddress(user, newEmail) {
return new Promise((resolve, reject) => {
user.setEmail(newEmail);
userRepository.saveUser(user).then(() => {
resolve();
}).catch(e => {
reject(e);
});
});
}
You may also have an unhandled rejection.
changeEmailAddress(user, "hello#there.com").then(function () {
//it never comes in here :(
}).catch(function(e) {
console.log(e); // Does this happen?
})
EDIT: Your changeEmailAddress uses the anti-pattern (see #torazburo's answer). Although this answer works, you should just return your saveUser promise unless you want to directly work with the result of it.
your function changeEmailAddress return nothing, that's why
changeEmailAddress(user, newEmail) {
let promise = new Promise((resolve, reject) => {
user.setEmail(newEmail);
userRepository.saveUser(user).then(() => {
return resolve();
}).catch(e => {
return reject(e);
});
});
return promise;
}
Related
I have not worked with Javascript in a long time, so now promises are a new concept to me. I have some operations requiring more than one asynchronous call but which I want to treat as a transaction where steps do not execute if the step before failed. Currently I chain promises by nesting and I want to return a promise to the caller.
After reading the chaining section of Mozilla's Using Promises guide, I'm not sure if what I'm doing is correct or equivalent to the "callback pyramid of doom".
Is there a cleaner way to do this (besides chaining with a guard check in each then)? Am I right in my belief that in Mozilla's example it will execute each chained then even when there is an error?
myfunction(key) => {
return new Promise((outerResolve, outerReject) => {
return new Promise((resolve, reject) => {
let item = cache.get(key);
if (item) {
resolve(item);
} else {
//we didnt have the row cached, load it from store
chrome.storage.sync.get(key, function (result) {
chrome.runtime.lastError
? reject({ error: chrome.runtime.lastError.message })
: resolve(result);
});
}
}).then((resolve) => {
//Now the inner most item is resolved, we are working in the 'outer' shell
if (resolve.error) {
outerReject(resolve);
} else {
//No error, continue
new Promise((resolve, reject) => {
chrome.storage.sync.get(keyBasedOnPreviousData, function (result) {
chrome.runtime.lastError
? reject({ error: chrome.runtime.lastError.message })
: resolve(result);
});
}).then((resolve) => {
//finally return the result to the caller
if (resolve.error) {
outerReject(resolve);
} else {
outerResolve(resolve);
}
});
}
});
});
}
Subsequent then statements are not executed (until a catch) when an exception is thrown. Also, .then returns a Promise, so you don't need to create an additional, outer Promise.
Try this example:
var p = new Promise((resolve, reject) => {
console.log('first promise, resolves');
resolve();
})
.then(() => {
throw new Error('Something failed');
})
.then(() => {
console.log('then after the error');
return('result');
});
p.then(res => console.log('success: ' + res), err => console.log('error: ' + err));
You will not see "then after the error" in the console, because that happens after an exception is thrown. But if you comment the throw statement, you will get the result you expect in the Promise.
I am not sure I understand your example entirely, but I think it could be simplified like this:
myfunction(key) => {
return new Promise((resolve, reject) => {
let item = cache.get(key);
if (item) {
resolve(item);
} else {
//we didnt have the row cached, load it from store
chrome.storage.sync.get(key, function (result) {
chrome.runtime.lastError
? throw new Error(chrome.runtime.lastError.message)
: resolve(result);
});
}
}).then((previousData) => {
// keyBasedOnPreviousData is calculated based on previousData
chrome.storage.sync.get(keyBasedOnPreviousData, function (result) {
chrome.runtime.lastError
? throw new Error(chrome.runtime.lastError.message)
: return result;
});
});
}
It's a bit of a mess. This is my attempt at rewriting. A good thing to try to avoid is new Promise().
function chromeStorageGet(key) {
return new Promise( (res, rej) => {
chrome.storage.sync.get(key, result => {
if (chrome.runtime.lastError) {
rej(new Error(chrome.runtime.lastError.message))
} else {
res(result)
}
});
});
});
function myfunction(key) {
const item = cache.get(key) ? Promise.resolve(cache.get(key)) : chromeStorageGet(key);
return item.then( cacheResult => {
return chromeStorageGet(keyBasedOnPreviousData);
});
}
Why avoid new Promise()?
The reason for this is that you want to do every step with then(). If any error happened in any of the promises, every promise in the chain will fail and any subsequent then() will not get executed until there is a catch() handler.
Lots of promise based-code requires no error handlers, because promise-based functions always return promises and exceptions should flow all the back to the caller until there is something useful to be done with error handling.
Note that the exceptions to these 2 rules are in my chromeStorageGet function. A few notes here:
new Promise can be a quick and easy way to convert callback code to promise code.
It's usually a good idea to just create a little conversion layer for this callback-based code. If you need chrome.storage.sync in other places, maybe create a little utility that promisifies all its functions.
If there is only 1 'flow', you can just use a series of then() to complete the process, but sometimes you need to conditionally do other things. Just splitting up these complicated operations in a number of different functions can really help here.
But this:
const result = condition ? Promise.resolve() : Promise.reject();
Is almost always preferred to:
const result = new Promise( (res, rej) => {
if (condition) {
res();
} else {
rej();
}
}
having trouble trying to write the following code in a way that doesn't involve nested promises.
function trickyFunction(queryOptions, data) {
return new Promise((resolve, reject) => {
if (data) {
resolve(data);
} else {
// ... a bunch of conditions to check and/or modify queryOptions. These checks and mods
// are vital but only required if data is not passed in. ...
if (anErrorHappensHere) {
reject('Oh no, an error happened');
}
somePromise(queryOptions).then((result) => {
resolve(result);
});
}
}).then((result) => {
criticalOperation1(result);
// the code here is long and shouldn't be duplicated
});
}
I really don't like the .then() chain after somePromise since it's inside the new Promise, but I really don't see a way around it. If I take the conditional out of a promise, then I'd have to duplicate the criticalOperation1 code, which isn't an option here. The conditional checks in the else block should only happen if data is not passed in. Making other functions is not permitted in my case, and using async/await is also not permitted in my case.
Does anyone have any ideas? I've worked with Promises for a bit but this one is stumping me.
I would just avoid using the new Promise syntax in this case and just start the promise chain early
function trickyFunction(queryOptions, data) {
return Promise.resolve()
.then( () => {
if (data) {
return Promise.resolve(data);
} else {
// ... a bunch of conditions to check and/or modify queryOptions. These checks and mods
// are vital but only required if data is not passed in. ...
if (anErrorHappensHere) {
// Could also just throw here
return Promise.reject('Oh no, an error happened');
}
return somePromise(queryOptions);
}
})
.then((result) => {
criticalOperation1(result);
// the code here is long and shouldn't be duplicated
});
}
function trickyFunction(queryOptions, data) {
return new Promise((resolve, reject) => {
if (anErrorHappensHere) {
reject('Oh no, an error happened');
}
resolve({data, queryOptions});
}).then((obj) => {
if(obj.data){
return Promise.resolve(obj.data);
} else {
return somePromise(obj.queryOptions)
}
}).then((result) => criticalOperation1(result));
.catch((err)=> console.log(err));
}
i am a little new at this. Please help
I am trying to return a promise from a function. This seems to work well until I try to return the promise in the then of an existing promise.
I am trying to do this in a FireFox extension. The code below is written for node.js as I thought it might give more explanation. I cannot figure out how to make it work.
function topLevel calls function level2. level2 waits for a promise to resolve and then returns a promise to level1. level1 logs in its .then.
level2 calls level3 after its internal promise is resolved and returns a new promise
In the example all promises resolve immediately. The example is paired down to the essentials
function topLevel() {
level2()
.then(() => {
console.log("topLevel resolved")
})
}
let testError=true;
function level2() {
if(testError) {
new Promise((resolve, reject) => {
resolve("Level 2");
})
.then(() => {
return (level3());
})
}
else {
return (level3());
}
}
function level3(){
return (new Promise((resolve, reject) => {
resolve("Level 3");
}));
}
topLevel();
there is a variable "testError" which changes the behavior of level 2. When set to "true" level2 waits for a promise and returns a promise from level3 in that promises then statement. level3 is run but the console.log in level1 never executes and an error results. When set to false everything works (promise from level3 is returned directly rather than in .then. The error is Cannot read property 'then' of undefined in toplevel .then.
The firefox webextension code from a background script is below
browser.browserAction.onClicked.addListener(topLevel);
function topLevel() {
level2()
.then(() => {
console.log("topLevel resolved")
})
}
function level2() {
new Promise((resolve, reject) => {
resolve("Level 2");
})
.then(() => {
return (level3());
})
}
function level3(){
return (new Promise((resolve, reject) => {
resolve("Level 3");
}));
}
It causes a warning in level2 between the .then and return statements that
"level2 is undefined". and again the log in level one never happens.
Any way to make this work?? I need to rely on this pattern
level2 does not return anything when testError is true.
The thenable (the function given to then) is a function. The return statement inside the thenable only concern the thenable itself (just like any function).
Change to
function level2() {
if (testError) {
return new Promise((resolve, reject) => {
resolve("Level 2");
}).then(() => {
return level3();
});
}
return level3();
}
I think it's as simple as adding a return before new Promise... in line 12. Revised code:
function topLevel() {
level2()
.then(() => {
console.log("topLevel resolved")
})
}
let testError = true;
function level2() {
if(testError) {
// Added "return" here
return new Promise((resolve, reject) => {
resolve("Level 2");
})
.then(() => {
return (level3());
})
}
else {
return (level3());
}
}
function level3() {
return (new Promise((resolve, reject) => {
resolve("Level 3");
}));
}
You need to return the new Promise you create in the level2 function.
I have written a general .js crud object which holds all the methods used to communicate with the server. However I'd like to avoid the repetition of .then and .catch and I would like to abstract that functionality in an external method.
Not sure if what I'm trying to achieve is even possible.
My code below:
all(url, success, fail){
return new Promise((resolve,reject) => {
_get(url)
.then((response) => {
if (response.status == 200) {
success.call(this,response);
return resolve();
}
})
.catch((error) => {
fail.call(this, error);
reject(error);
});
});}, submit, update .....
Wonderland desired result:
all(url, success, fail){
return new Promise((resolve, reject) => {
_get(url).handle(args);
});
}
Just avoid the Promise constructor antipattern and callbacks, and you'll be good!
function all(url) {
return _get(url).then((response) => {
if (response.status == 200) {
return response;
}
// most likely you want to `throw` an error here?
});
}
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.