I´m new to JavaScript and a little bit confused about Promises, this is what I have:
export const testFunction = () => dispatch => {
otherFunction().then(( response ) => {
//do something...
return response;
}).catch(( error ) => {
//do something...
return error;
});
}
In another file I'm trying to get the value returned from the then like this:
let result = this.props.testFunction()
And like this:
let result = this.props.testFunction ().then(( result ) => {
console.log(result);
}).catch(( error ) => {
console.log(result); // undefined
});
But I get undefined as the result, what is the correct way of getting that value?
testFunction is not returning a Promise so you can't use then or catch and returns undefined because well, it's not returning any thing.
Try to return a promise like the example below however I am not sure what the dispatch argument supposed to do so I have removed it and hopefully this'll help:
export const testFunction = () => {
return new Promise((resolve, reject) => {
otherFunction().then(( response ) => {
//do something...
resolve(response);
}).catch(( error ) => {
//do something...
reject(error);
});
});
}
when you are trying to return a promise to use it in another file, you must use the following syntax:
const testFunction = () => {
return new Promise((resolve, reject) => {
if (error) {
return reject(error); // this is the value sent to .catch(error)
}
return resolve(valueToReturn); // this is the value sent to .then(result)
});
}
This is how you create a promise to use where you want, if it has an error it will sent to catch block, otherwise you should see the console.log(result) value.
And in your external file you can use the syntax that you are using, try it in that way to see the console.log value.
Here is a link to see more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Related
If we have this function
const getData = () => {
foo()
.then(result => {
return result;
})
.catch(error => {
return error;
});
};
Although getData is not a promise itself, but it contains a promise, which is asyncrnous.
So what is the best way to wait for getData to return something. Async / Await doesn't work cause they work with promises.
Thanks.
Currently, getData() doesn't return anything. You need to make it return a Promise, so you can await it or chain .then() to it.
const getData = () => {
return foo() // <-- here
.then(result => {
return result;
})
.catch(error => {
throw error;
});
};
// Now you can do :
getData().then(...)
// or :
const data = await getData();
In this case, you can also omit the curly braces and the explicit return, and make it implicit :
const getData = () => foo()
.then(result => {
return result;
})
.catch(error => {
throw error;
});
Hey but what's that :
.then(result => {
return result;
})
This does nothing. It takes a value and simply returns it without doing anything. You can remove it.
You can now rewrite getData() this way :
const getData = async () => {
try {
return await foo()
} catch (error) {
throw error;
}
}
For that matter, this :
.catch(error => { throw error; });
or this :
catch (error) { throw error; }
are also pretty useless, they just "relay" (bubble up) the error that has to be caught in the calling function.
Now it's obvious getData does pretty much only one thing, it's returning foo(), which is a Promise. It's only a wrapper around a Promise... so it's actually pretty useless.
Bottom line, detData() is useless altogether. foo is a Promise; writing a function that returns a Promise so you can use it like a Promise is just... a Promise with an extra step. Just use foo directly.
let result;
try {
result = await foo();
} catch (error) {
console.log(error);
}
console.log(result);
This will not work because getData is not returning a value. You can add a return statement before foo call and wait for the return value.
const getData = () => {
return foo();
};
getData().then(data => {
console.log(data);
}).catch(err => {
console.log(err);
});
To wait for an operation you must return a Promise or use a callback. The code snippet below runs and should illustrate how this works. I implemented a sample foo function that is actually asynchronous (wait for 1 second before returning the data '12345'). I used async/await to illustrate how that can work, but you can equally return the result of foo and use then instead.
const foo = () => {
return new Promise(resolve => {
setTimeout(() => resolve('12345'), 1000);
});
}
const getData = async () => {
const data = await foo();
console.log(`Data is ${data}`);
return data;
};
getData()
.then(() => console.log('complete'))
.catch(err => console.log(`oops: ${err}`));
console.log('this prints first since async operation is still pending');
I am confused with the use of promise, specifically of its way of data manipulation (passing values from block to block) and exception handling (bubbling up the error). I am trying to learn a right way to use promise and to handle error, something like
Error: A caught error.
at promiseTwo()
at promiseOne()
at subprocess()
at mainprocess()
Here are my two attempts in implementing them:
Attempt 1: Clumsy, deeply nested, and errors are uncaught.
var subprocess = () => {
return new Promise((resolve, reject) => {
promiseOne().then(data1 => {
// Some code with data1, throw some error
promiseTwo().then(data2 => {
// Some code with data1n2, throw some error
promiseThree().then(data3 => {
// Data manipulation with data1, data2, and data3
return resolve(<...>)
}).catch(err3 => { throw err3 })
}.catch(err2n3 => { throw err2n3 }) // >>> ERR: Cannot get err3.
}.catch(err1n2n3 => { return reject(err1n2n3) }) // >>> ERR: Cannot get err3 or err2.
}
}
return new Promise((resolve, reject) => {
subprocess().then(data => {
// TODO
}).catch(allErr => { return reject(allErr) }
}
Attempt 2: Unable to use data from previous promise block.
var subprocess = () => {
return new Promise((resolve, reject) => {
promiseOne()
.then(data1 => {
// Some code with data1, throw some error
return promiseTwo()
})
.then(data2 => {
// Some code with data1n2, throw some error
// >>> ERR: Cannot get data1
return promiseThree()
})
.then(data3 => {
// Data manipulation with data1, data2, and data3
// >>> ERR: Cannot get data1 and data2
return resolve(<...>)
})
.catch(err1n2n3 => {
return reject(err1n2n3)
})
}
}
return new Promise((resolve, reject) => {
subprocess().then(data => {
// Some code, throw some error
}).catch(allErr => { return reject(allErr) }
}
Note: Some of the promise block (i.e. promiseOne, promiseTwo, etc.) are pre-defined so I do not have control over what data they will return. I am sure there are more errors in the attempts (e.g. if returning a function is a right way to do it).
Please help. Thanks.
for this kind of situation, you can combine promises and async-await together.
From the question, it seems we have three promises and one function that executes and handle them.
You can try something like this -
const subProcess = () => {
return new Promise((resolve, reject) => {
// Using IIFE ( You shouldn't put async keyword on promise callbac )
(async () => {
// Use of try catch to handle the errors
try {
await promiseOne()
await promiseTwo()
await promiseThree()
// Additional code if need after them
} catch(err){
// Handle error ( all three promise error will be transferred here )
}
})()
})
}
The above code waits for the promises to execute one by one and also catch error from all three promises if any.
And as #samuei mentioned, you can also use Promise.all() in this.
const subProcess = () => {
return new Promise((resolve, reject) => {
// Using IIFE ( You shouldn't put async keyword on promise callbac )
(async () => {
// Use of try catch to handle the errors
try {
const myPromises = [promiseOne, promiseTwo, promiseThree];
const res = await Promise.all(myPromises);
// Additional code if need after them
} catch(err){
// Handle error ( all three promise error will be transferred here )
}
})()
})
}
And if you don't want to use async-await then you can do something like this as well
const subProcess = () => {
return new Promise((resolve, reject) => {
const myPromises = [];
const myPromises = [promiseOne, promiseTwo, promiseThree];
Promise.all(myPromises)
.then(res => {
// Handle the response
})
.catch(err => {
// Handle the error
})
})
}
It sounds like you're looking for Promise.all, which lets you set a series of promises in motion, then deal with the results when they are all resolved.
I was trying to start using promise chaining (was using callbacks so far), and I wanted to edit this code:
Account.findById(req.user._id,
(err, acc) => {
if (err) console.log(err);
var r = req.body;
acc.fullName = r.fullName;
acc.displayname = r.username;
acc.city = r.city;
acc.province = r.province;
acc.postalCode = r.postalCode;
acc.phone = r.phone;
acc.ageGroup = r.ageGroup;
acc.education = r.education;
acc.lookingForWork = r.lookingForWork;
acc.employmentStatus = r.employmentStatus;
acc.workingWithEOESC = r.workingWithEOESC;
acc.resume = r.resume;
acc.mainWorkExp = r.mainWorkExp;
acc.save();
res.redirect('/seeker');
})
This is what I tried to do:
Account.findById(req.user._id)
.then((err, acc) => {
if (err) console.log(err);
var r = req.body;
acc.fullName = r.fullName;
acc.displayname = r.username;
acc.city = r.city;
acc.province = r.province;
acc.postalCode = r.postalCode;
acc.phone = r.phone;
acc.ageGroup = r.ageGroup;
acc.education = r.education;
acc.lookingForWork = r.lookingForWork;
acc.employmentStatus = r.employmentStatus;
acc.workingWithEOESC = r.workingWithEOESC;
acc.resume = r.resume;
acc.mainWorkExp = r.mainWorkExp;
acc.save();
})
.catch(e => console.log(e))
.then((acc) => {
console.log(acc);
res.redirect('/seeker');
})
});
But the promise version throws a TypeError: Cannot set property 'fullName' of undefined error.
The changes are not being saved and console loging the acc results in undefined. Forgot to add that in the post
I'm just learning promises. What am I missing? The inside code is almost exactly the same.
.then functions in promises can take maxiumum two argument which must be both functions, the first function is when the promise is fullfilled, while the second function is when the promise is rejected, alternatively you can pass in only one function to .then and use .catch to handle any kind of error or a rejected promise
var f1 = acc => console.log(acc); // logs out the acc object;
var f2 = err => console.log(err); // logs out error while executing the promise
.then(f1,f2); // when you do this there is no need for a catch block
// or
.then( acc => {
console.log(acc) // logs out the acc object
}).catch( err => console.log(err) ) //logs out the error
// if you need to handle another value
.then( acc => {
console.log(acc);
return acc.save(); //lets say acc.save() returns an object
}).then( acc => console.log(acc) ); // the value of acc.save() is passed down to the next `.then` block
Callback-based API's have a common convention of using the first argument of the callback function to indicate failure. Promises require no such convention, because they have built-in means of handling failures, so you need to just operate on the first argument, not the second. The second argument will be undefined, resulting in the error you're seeing.
Most of the time when you're translating callback-based code to promise-based code, you want to use this pattern as your basic guide:
// Callback-based:
asyncFn((err, result) => {
if (err) {
// handle failure
} else {
// handle success
}
});
// Promise-based equivalent:
asyncFnPromise()
.then((result) => {
// handle success
}, (err) => {
// handle failure
});
// Alternative promised-based:
asyncFnPromise()
.then((result) => {
// handle success.
// Note that unlike the above, any errors thrown here will trigger
// the `catch` handler below, in addition to actual asyncFnPromise
// failures.
})
.catch((err) => {
// handle failure
});
then is just called on success, therefore there is definetly no error:
then((acc) => {
It is happening because the function 'findById' probably not returning 'promise' and just returning some response.You need to create a 'promise object' in findById function and return it.
findById (){
let promise = new Promise((resolve, reject) => {
Suppose results is yield from some async task, so when
//wanted results occured
resolve(value);
//unwanted result occured
reject(new Error('Something happened!'));
return promise;
}
findById.then(response => {
console.log(response);
}, error => {
console.log(error);
});
I'm missing something on how to use async/await and probably promises methods too.
Here is what I am trying to do:
login-form-component.html
<button (click)="sinInWithFacebook()">Sign In with Facebook</button>
login-form-component.ts
async sinInWithFacebook() {
const loginResponse = await this.auth.signInWithFacebook();
console.log(loginResponse); // it returns undefinied
}
auth.service
signInWithFacebook() {
try {
this.fb.login(['email'])
.then((loginResponse: FacebookLoginResponse) => {
const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
return <LoginResponse>{
result: this.auth.auth.signInWithCredential(credential)
}
})
}
catch (e) {
return {
error: e
}
}
}
loginResponse will always returns undefinied when I want it to return the result object. I believe it has something to do with asynchronous methods. Can you help me out?
Thanks
You should return the result from signInWithFacebook function:
try {
return this.fb.login(['email'])
.then((loginResponse: FacebookLoginResponse) => {
const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
return <LoginResponse>{
result: this.auth.auth.signInWithCredential(credential)
}
})
}
your function doesn't return anything. And the try .. catch block doesn't work that way for Promises.
signInWithFacebook():Promise<LoginResponse> {
return this.fb.login(['email'])
.then((loginResponse: FacebookLoginResponse) => {
const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
//my guts tell me that `this.auth.auth.signInWithCredential` is async as well.
//so let the promise chain deal with that/resolve that
return this.auth.auth.signInWithCredential(credential);
})
.then(
result => ({ result }),
error => ({ error })
);
}
This is probably a silly question, but mid promise chain, how do you reject a promise from inside one of the then functions? For example:
someActionThatReturnsAPromise()
.then(function(resource) {
return modifyResource(resource)
})
.then(function(modifiedResource) {
if (!isValid(modifiedResource)) {
var validationError = getValidationError(modifiedResource);
// fail promise with validationError
}
})
.catch(function() {
// oh noes
});
There's no longer a reference to the original resolve/reject function or the PromiseResolver. Am I just supposed to add return Promise.reject(validationError); ?
Am I just supposed to add return Promise.reject(validationError);?
Yes. However, it's that complicated only in jQuery, with a Promise/A+-compliant library you also could simply
throw validationError;
So your code would then look like
someActionThatReturnsAPromise()
.then(modifyResource)
.then(function(modifiedResource) {
if (!isValid(modifiedResource))
throw getValidationError(modifiedResource);
// else !
return modifiedResource;
})
.catch(function() {
// oh noes
});
Use Promise.reject
Like this
function test()
{
return new Promise((resolve, reject) => {
resolve(null)
}).then(() => console.info('yes')).then(() => {
return Promise.reject('hek');
})
}
test().then(() => console.info('resolved')).catch(() => console.info('rejected'))