5

I have a function like so:

check_auth(){ fetch(Urls.check_auth(), { credentials: 'include', method: 'GET' }).then(response => { if(response.ok) return response.json(); }).then(json => { return json.user_logged_in; }); }

And then I try to do this:

if(this.check_auth()){ // do stuff } else { // do other stuff }

But, this.check_auth() is always undefined.

What am I missing here? I thought that within fetch's then() was where the resolved Promise object was therefore I thought that I'd get true when the user was logged in. But this is not the case.

Any help would be greatly appreciated.

Improve this question

4 Answers 4

Reset to default
4

Use callback

check_auth(callback){ fetch(Urls.check_auth(), { credentials: 'include', method: 'GET' }).then(response => { if(response.ok) return response.json(); }).then(json => { callback(json.user_logged_in); }); } check_auth(function(data) { //processing the data console.log(d); });

In React it should be easier to handle, You can call a fetch and update the state, since on every update of state using setState the render method is called you can use the state to render

check_auth = () =>{ fetch(Urls.check_auth(), { credentials: 'include', method: 'GET' }).then(response => { if(response.ok) return response.json(); }).then(json => { this.setState({Result: json.user_logged_in}); }); }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Yep. I've tried. There has got to be something else fundamentally wrong with my approach. Thank you for your help.
This answer doesn't work because this is React and I can't render from within the check_auth function. Does that makes sense? Does that give you any further idea of what I'm doing wrong?
I thought it would be that easy too. But if I put this in state, anyone could go and download the React dev tools, go into state and simply change logged_in to true and they're in, bank account numbers etc. all wide open. I want to check if the user is logged in on every API call.
I think that the state is the property of a react component that is not publicly exposed to modify and hence this wont be a issue, I have seen blogs on React login which use the state themself
I can't make it work. I thought maybe in production mode it would hide state, but sure enough I can do anything I want to it. I just don't get it.
4

it can be solved with the es6 aync functions

Note: the example is different from what OP asked but it gives some hints on how it should be done

 const loadPosts = async () => { const response = await fetch(/* your fetch request */); const posts = await response.json(); return posts; };
Improve this answer

2 Comments

when I console.log(loadPosts()) it returned this [[PromiseValue]]: Array(14) How can I loop thru them?
the async function is returning a fulfilled promise which you have to resolve whenever you are calling it. example const posts = await loadPosts();
2

Async calls doesn't always resolve to be used anywhere within your app when you use .then(). The call is still async and you need to call your if-statement when you are calling your fetch. So anything that relies on the data you are fetching has to be chained to the fetch with .then().

 check_auth(){ fetch(Urls.check_auth(), { credentials: 'include', method: 'GET' }).then(response => { if(response.ok) return response.json(); }).then(json => { return json.user_logged_in; }).then(user => checkIfAuthSuccess(user)); //You have to chain it }

Wrapping your if-statement in a function or however your code looks like.

checkIfAuthSuccess(user){ if(user){ // do stuff } else { // do other stuff } }

Nice video about async behavior in JavaScript: Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

Improve this answer

2 Comments

Yep. I've tried. There has got to be something else fundamentally wrong with my approach. Thank you for your help.
Neither of these answers work because this is React and I can't render from within the check_auth function. Does that makes sense? Does that give you any further idea of what I'm doing wrong?
2

To return data as JSON from Promise you should call it with await modifier from async function.

For example:

const checkAuth = async () => { const data = await fetch(Urls.check_auth()) .then(response => response.json()) .then(json => json.user_logged_in) return data; }

More info about promises you can find here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.