I'm trying to convert this code into promise (The one that i commented //). My goal is to print the user's location (longitude and latitude) but I'm having a hard time figuring it out, on how to convert this into Promise. (Sorry for my english)
// const getUserLocation = () => {
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(succes, error);
// } else {
// console.log('Your browser does not support geolocation');
// }
// }
// const succes = (positon) => {
// console.log(positon.coords.latitude)
// console.log(positon.coords.longitude)
// }
// const error = (err) => {
// console.log('The User have denied the request for Geolocation.');
// }
// getUserLocation();
const getUserLocation = () => {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
resolve(navigator.geolocation.getCurrentPosition);
} else {
reject('The User have denied the request for Geolocation.');
}
})
}
getUserLocation()
.then((response) => {
console.log(response.coords.longitude);
console.log(response.coords.latitude);
})
.catch((err) => {
console.log(err);
})
You are very close, the promise variant should look like this:
const getUserLocation = () => {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(resolve, reject);
} else {
reject('The User have denied the request for Geolocation.');
}
})
}
In the code above you pass the resolve and reject functions to getCurrentPosition() which calls them with either the geolocation position, or an error (in the case of reject) as sole argument.
I'd just pass resolve and reject from the Promise function to the getCurrentPosition function.
const getUserLocation = () => {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(resolve, reject)
} else {
reject('The User have denied the request for Geolocation.');
}
})
}
getUserLocation()
.then((response) => {
console.log('success:', response.coords.longitude, response.coords.latitude);
})
.catch((err) => {
console.log('error:', err);
})
No. That's not the way to do it. There is nothing special about promises. It is not a new syntax added to the language. It is just an ordinary constructor/class that you can write yourself in pure javascript. Therefore there is nothing special that resolve() can do to convert callbacks to promises.
The correct way is to pass the value passed to the callback to the resolve() function:
// To avoid confusion I rename the resolve() and reject() function to
// AAA and BBB. This is to illustrate that they are just variables
// **you** declare and do not have any special syntax. This is also
// to avoid confusion with the Promise.resolve() static method.
const getUserLocation = () => {
return new Promise((AAA, BBB) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(succes, error);
} else {
console.log('Your browser does not support geolocation');
BBB(new Error('Your browser does not support geolocation')); // optional
}
const succes = (positon) => {
console.log(positon.coords.latitude)
console.log(positon.coords.longitude)
AAA(position); // This is how you correctly resolve()
}
const error = (err) => {
console.log('The User have denied the request for Geolocation.');
BBB(err); // This is how you correctly reject()
}
});
}
Basically you need to copy your success() and error() functions into the scope of your getUserLocation() function and then you MUST resolve or reject inside those functions.
Related
When using a simple callback such as in the example below:
test() {
api.on( 'someEvent', function( response ) {
return response;
});
}
How can the function be changed to use async / await? Specifically, assuming 'someEvent' is guaranteed to be called once and only once, I'd like the function test to be an async function which does not return until the callback is executed such as:
async test() {
return await api.on( 'someEvent' );
}
async/await is not magic. An async function is a function that can unwrap Promises for you, so you'll need api.on() to return a Promise for that to work. Something like this:
function apiOn(event) {
return new Promise(resolve => {
api.on(event, response => resolve(response));
});
}
Then
async function test() {
return await apiOn( 'someEvent' ); // await is actually optional here
// you'd return a Promise either way.
}
But that's a lie too, because async functions also return Promises themselves, so you aren't going to actually get the value out of test(), but rather, a Promise for a value, which you can use like so:
async function whatever() {
// snip
const response = await test();
// use response here
// snip
}
It's annoying that there isn't a straightforward solution, and wrapping return new Promise(...) is fugly, but I have found an ok work-around using util.promisify (actually it also kinda does the same wrapping, just looks nicer).
function voidFunction(someArgs, callback) {
api.onActionwhichTakesTime(someMoreArgs, (response_we_need) => {
callback(null, response_we_need);
});
}
The above function does not return anything, yet. We can make it return a Promise of the response passed in callback by doing:
const util = require('util');
const asyncFunction = util.promisify(voidFunction);
Now we can actually await the callback.
async function test() {
return await asyncFunction(args);
}
Some rules when using util.promisify
The callback must be the last argument of the function that is gonna be promisify
The supposed-callback must be in the form (err, res) => {...}
Funny thing is we do not need to ever specifically write what's the callback actually is.
async/await is magic. You can create a function asPromise to handle this kind of situations:
function asPromise(context, callbackFunction, ...args) {
return new Promise((resolve, reject) => {
args.push((err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
if (context) {
callbackFunction.call(context, ...args);
} else {
callbackFunction(...args);
}
});
}
and then use it when you want:
async test() {
return await this.asPromise(this, api.on, 'someEvent');
}
the number of args is variable.
You can achieve this without callbacks , use promise async await instead of callbacks here how I would do this. And also here I have illustrated two methods to handle errors
clickMe = async (value) => {
// begin to wait till the message gets here;
let {message, error} = await getMessage(value);
// if error is not null
if(error)
return console.log('error occured ' + error);
return console.log('message ' + message);
}
getMessage = (value) => {
//returning a promise
return new Promise((resolve, reject) => {
setTimeout(() => {
// if passed value is 1 then it is a success
if(value == 1){
resolve({message: "**success**", error: null});
}else if (value == 2){
resolve({message: null, error: "**error**"});
}
}, 1000);
});
}
clickWithTryCatch = async (value) => {
try{
//since promise reject in getMessage2
let message = await getMessage2(value);
console.log('message is ' + message);
}catch(e){
//catching rejects from the promise
console.log('error captured ' + e);
}
}
getMessage2 = (value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(value == 1)
resolve('**success**');
else if(value == 2)
reject('**error**');
}, 1000);
});
}
<input type='button' value='click to trigger for a value' onclick='clickMe(1)' />
<br/>
<input type='button' value='click to trigger an error' onclick='clickMe(2)' />
<br/>
<input type='button' value='handling errors with try catch' onclick='clickWithTryCatch(1)'/>
<br/>
<input type='button' value='handling errors with try catch' onclick='clickWithTryCatch(2)'/>
const getprice = async () => {
return await new Promise((resolve, reject) => {
binance.prices('NEOUSDT', (error, ticker) => {
if (error) {
reject(error)
} else {
resolve(ticker);
}
});
})}
router.get('/binanceapi/price', async function (req, res, next) {
res.send(await binanceAPI.getprice());});
I am trying to user webgazer.js where my code basically checks to see whether the webgazer is initialized and when it is initialized it resolves a promise which dispatches an action. This works however if for example there is no webcam I need to throw an error. The error in my code never gets called.
Here is my code
export function detectJsCamera() {
return async(dispatch) => {
dispatch({type: types.JS_DETECTING_CAMERA});
try {
await detectCamera();
await dispatch({type: types.JS_CAMERA_DETECTED});
} catch (error) {
await dispatch({type: types.CAMERA_DETECTION_FAILED, error: error.message});
throw error;
// this.props.history.push('/setup/positioning')
};
}
}
const detectCamera = () => new Promise((resolve, reject) => {
const checkIfReady = () => {
if (webgazer.isReady()) {
resolve('success');
} else {
console.log('called')
setTimeout(checkIfReady, 100);
}
}
setTimeout(checkIfReady,100);
});
You will need to reject in order to throw an exception like below
const detectCamera = () => new Promise((resolve, reject) => {
const checkIfReady = () => {
if (webgazer.isReady()) {
resolve('success');
} else {
console.log('called');
reject("some error");
}
}
setTimeout(checkIfReady,100);
});
You need to call reject() in your detectCamera method when your webgazer is not initialised then it would be caught in your catch block in detectJsCamera method.
auth0.js has a function that's used to parse the URL hash fragment and extract the authentication result therefrom. I'm wrapping this function within one called loadSession as follows:
public loadSession(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult) {
window.location.hash = '';
localStorage.setItem('token', authResult.accessToken);
// TODO (1)
} else if (err) {
// TODO (2)
}
});
}
As seen above, parseHash takes a callback function as an argument and I cannot control that. I would like loadSession to return a Promise that would be resolved at // TODO (1) and rejected at // TODO (2) above. This way I can do obj.loadSession().then(() => { // do something if successful }).catch((err) => { // raise error if not })
Simply wrap it inside a promise:
public loadSession() {
return new Promise((resolve, reject) => {
this.auth0.parseHash((err, authResult) => {
if(authResult) {
window.location.hash = '';
localStorage.setItem('token', authResult.accessToken);
resolve(authResult);
} else if (err) {
reject(err);
}
});
});
}
You can pretty much pass any callback function to a function that returns a promise given:
The callback is the last argument
The callback function takes error as it's first argument
Here is an example:
const asPromise =
(context) =>
(fn) =>
(args) =>
new Promise(
(resolve,reject) =>
fn.apply(
context,
(args||[]).concat(
function(){
if(arguments[0]){
reject(arguments[0]);return;
}
resolve(Array.from(arguments).slice(1));
}
)
)
);
// to apply parseHash on auth0
public loadSession(): Promise {
return asPromise(this.auth0)(this.auth0.parseHash)()
.then(
([authResult])=>{
if (authResult) {
window.location.hash = '';
localStorage.setItem('token', authResult.accessToken);
//whatever you return here is the resolve
return authResult;
}
//just throw in a promise handler will return a rejected promise
// this is only for native promises, some libraries don't behave
// according to spec so you should test your promise polyfil if supporting IE
throw "Promise resolved but got no authResult";
}
)
}
public loadSession(): Promise {
return new Promise((resolve, reject) => {
this.auth0.parseHash((err, authResult) => {
if (authResult) {
window.location.hash = '';
localStorage.setItem('token', authResult.accessToken);
// TODO (1)
// resolve(something)
} else if (err) {
// TODO (2)
// reject(something)
}
});
}
For more information about using Promise API, you can visit MDN Docs
Or you can use a tiny library that does that for you: promisify-auth0 on GitHub, promisify-auth0 on npmjs.org.
Now updated to version 9.5.1.
I have a helper function for using fetch with CouchDB which ends as:
...
return fetch(...)
.then(resp => resp.ok ? resp.json() : Promise.reject(resp))
.then(json => json.error ? Promise.reject(json) : json)
and when I use it elsewhere, I was under the impression that I could .catch those explicit rejections:
above_function(its_options)
.then(do_something)
.catch(err => do_something_with_the_json_error_rejection_or_resp_not_ok_rejection_or_the_above(err))
but alas, I can't seem to be able to get a hold of the rejections.
The specific error I'm after is a HTTP 401 response.
What gives?
(Please note that there are implicit ES6 return's in the .thens)
function test() {
return new Promise((resolve, reject) => {
return reject('rejected')
})
}
test().then(function() {
//here when you resolve
})
.catch(function(rej) {
//here when you reject the promise
console.log(rej);
});
Make sure every call to a then() returns a value.
For e.g.
var url = 'https://www.google.co.in';
var options = {};
var resolves = Promise.resolve();
resolves.then(() => {
console.log('Resolved first promise');
var fetchPromise = fetch(url, options);
fetchPromise.then(() => {
console.log('Completed fetch');
});
})
.catch(error => {
console.log('Error', error);
});
Notice the console shows an uncaught exception. However, if you returned the inner promise (or any other value, which ends up turning into a promise via resolve), you end up flattening the promise so exception bubble up.
var url = 'https://www.google.co.in';
var options = {};
var resolves = Promise.resolve();
resolves.then(() => {
console.log('Resolved first promise');
var fetchPromise = fetch(url, options);
return fetchPromise.then(() => {
console.log('Completed fetch');
});
})
.catch(error => {
console.log('Error', error);
});
Notice the exception bubbles up to the outer promise. Hope this clears up things a little bit.
Why not wrap it in a try / catch block
// define a failing promise
const test = ()=> new Promise((resolve, reject) => reject('rejected'));
// using an immediately executing function to call an async block
(async ()=> {
try {
await test(); // => this will throw an error
} catch (er) {
console.log(er); // 'rejected'
}
})();
Promise rejections fall to the second param of the then function.
function test() {
return new Promise((resolve, reject) => {
return reject('rejected')
})
}
test().then(function() {
//here when you resolve
}, function(rej) {
//here when you reject the promise
console.log(rej)
})
I have a Promise method that parses links from the web. It returns an Object which I try to access a link key from, but when this Object is empty, it somehow skips the if I have to check its length, causing a scandalous error. Below the codes.
First, the method that is a Promise to parse the links:
* parseReporter() {
const article = new Promise((resolve, reject) => {
parser.parseURL(`https://www.google.com/alerts/feeds/${this.googleAlertsUrlId}/${this.reporterUrlId}`, (err, parsed) => {
if (err) {
reject(new Error(err))
}
if (parsed.feed.entries.length === 0) {
reject(new Error('Nothing to parse'))
}
const link = parsed.feed.entries[0].link
const betterLink = link.substring(42, link.indexOf('&ct='))
mercury.parse(betterLink).then((data) => {
resolve(data)
}).catch((err) => {
reject(new Error(err))
})
})
})
return article
}
And then, here's the method that calls this parseReporter():
* _getLastestNews(userReporter) {
const reportersOperation = new ReportersOperation()
reportersOperation.googleAlertsUrlId = userReporter.url.split('/')[3]
reportersOperation.reporterUrlId = userReporter.url.split('/')[4]
try {
return yield reportersOperation.parseReporter()
} catch (e) {
this.addError(HTTPResponse.STATUS_INTERNAL_SERVER_ERROR, e.message)
return false
}
}
The error is caused when it tries to access link from parsed.feed.entries[0]. I've already logged out the length, and I confirmed to do work and show a number, but it insists on skipping it. Am I doing something wrong with the Promise it try/catch themselves?
reject doesn't "stop" or "return" from a function like return
Therefore, your code is checking for error conditions, but continuing on, as if the data is OK
By adding return before the call to reject, you'll stop this from happening
Just the area of code with changes shown:
// snip
if (err) {
return reject(new Error(err))
}
if (parsed.feed.entries.length === 0) {
return reject(new Error('Nothing to parse'))
}
const link = parsed.feed.entries[0].link
const betterLink = link.substring(42, link.indexOf('&ct='))
//snip
Besides, what Jaramonda suggested, you're also using an anti-pattern when you have a promise and you do resolve and reject in both paths. You can do that much more efficiently:
resolve(mercury.parse(betterLink));
But, what you really should do is you should promisify parser.parseURL() so you can write all the control flow logic using promises. This is much more foolproof and creates a reusable interface that uses promises that you can use elsewhere:
// make promisified version of parser.parseURL()
parser.parseURLP = function (url) {
return new Promise((resolve, reject) => {
parser.parseURL(url, (err, parsed) => {
if (err) return reject(new Error(err));
resolve(parsed);
});
});
};
function parseReporter() {
return parser.parseURL(`https://www.google.com/alerts/feeds/${this.googleAlertsUrlId}/${this.reporterUrlId}`).then(parsed => {
if (parsed.feed.entries.length === 0) {
throw new Error('Nothing to parse');
}
const link = parsed.feed.entries[0].link
const betterLink = link.substring(42, link.indexOf('&ct='))
return mercury.parse(betterLink).catch(err => {
// wrap error in Error object
throw new Error(err);
})
})
}