Function returns false but i need why return true react native

Question

Hi people i new in react native whit expo and i have a problem...

I have this function in another file :

const login = async(email, password) => {
    axios.post('/login', {
        email : email,
        password: password
    }).then(response  => {
        let info = response.data.data.token
        AsyncStorage.setItem('scute-user-token', info)
    }).catch(error => {
        Alert.alert(error)
    })
    const Scutetoken = await AsyncStorage.getItem('scute-user-token')
    if (Scutetoken !== null ){
        return true 
    } else {
        return false 
    }
}

and I call in :

 login = async() => {
    const login = await funciones.login(this.state.email, this.state.password)
    console.log(login)
    if(login == true){
      const me = funciones.yo()
       if(me == true){
         this.props.navigation.navigate('Home')
       } else{
         await AsyncStorage.clear()
         Alert.alert('No se puede acceder en este momento')
       }
    } 
  }

¿The problem? the problem its why the function always return false even if save the token i try solved of different ways but i not found solution....

Thx 4 the answers

I think you might need `await` in front of your call to `axios.post`. Not sure if that is the only problem though. The problem looks like the call to `AsyncStorage.getItem` is reached before `axios.post` completes because `axios.post` is asynchronous. — Addison, Jul 01 '20 at 16:30
Slightly borderline dupe of [how-do-i-return-the-response-from-an-asynchronous-call](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call), potentially some extra notes as to why the same principle applies would be needed. — ASDFGerte, Jul 01 '20 at 16:32

score 0 · Answer 1 · answered Jul 01 '20 at 16:32

const login = async(email, password) => {
    axios.post('/login', {
        email : email,
        password: password
    }).then(response  => {
        let info = response.data.data.token
        AsyncStorage.setItem('scute-user-token', info)
    }).catch(error => {
        Alert.alert(error)
    })
    const Scutetoken = await AsyncStorage.getItem('scute-user-token')
    if (Scutetoken !== null ){
        return true 
    } else {
        return false 
    }
}

Depending of how long your POST request to '/login' lasts, the moment your getting your token, the request might be not finished. So that's why your ScuteToken is going to be null.

Call await axios.post() ... so it will wait for the call to be finished.

score 0 · Answer 2 · answered Jul 01 '20 at 16:34

axios.post is asynchronous. You've passed it a callback in .then(), but you aren't awaiting anything. So you're checking for the value in storage before you've set that value.

Instead of using the callback on .then(), stick with your current standard of using await. Something like this:

try {
  let response = await axios.post('/login', {
    email : email,
    password: password
  });
  let info = response.data.data.token;
  await AsyncStorage.setItem('scute-user-token', info);
  // you don't need to read back the token, you already have it in "info"
  if (info !== null){
    return true;
  } else {
    return false;
  }
} catch (e) {
  Alert.alert(e);
}

score 0 · Answer 3 · answered Jul 01 '20 at 16:53

axis.post is asynchronous, so when post API is being called it'll run in the background and next statements will continue to get executed.

So in your implementation await AsyncStorage.getItem('scute-user-token') is being called before you get the response from the server. Initially it'll be null that's the reason why always false is being returned.

In order to make this work you can use two methods

Using async-await


const login = async (email, password) => {
  try {
    const response = axios.post('/login', {
      email: email,
      password: password,
    });
    let info = response.data.data.token;
    await AsyncStorage.setItem('scute-user-token', info);
    return info !== null
  } catch (error) {
    Alert.alert(error);
    return false;
  }
};

By returning from .then itself

const login = async (email, password) => {
  return axios
    .post('/login', {
      email: email,
      password: password,
    })
    .then(async response => {
      let info = response.data.data.token;
      await AsyncStorage.setItem('scute-user-token', info);
      return info !== null;
    })
    .catch(error => {
      Alert.alert(error);
      return false;
    });
};

Hope this helps.

Function returns false but i need why return true react native

3 Answers3