I am promisifying the React Native AsyncStorage getItem method but I am being warned that it is returning a possible unhandled promise rejection. Here's what I'm doing, what's wrong with my code?

In App.js ComponentDidMount()

ponentDidMount() {
  ConnectyCube.init(...config);
  authInitialization = async () => {
    const locallyStoredPhoneNumber = await getStoredPhoneNumber();
    console.log(locallyStoredPhoneNumber);
    authorizeFirebase(this.getFirebaseAccessToken);
    this.props.authorizing(true);
  }
  authInitialization();
}

Then in localStorage.js

export const getStoredPhoneNumber = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem('@phone_number', (error, result) => {
      result ? resolve(result) : reject(error);
    })
  })
}

Thanks in advance.

UPDATE

I have now added error handling:

export const getStoredPhoneNumber = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem('@phone_number', (error, result) => {
      result ? resolve(result) : reject(error);
    })
  }).catch(error => console.error(error))
}

Seems to work - here's my extra logic that depends on the result of the AsyncStorage call:

ponentDidMount() {
  ConnectyCube.init(...config);
  authInitialization = async () => {
    const locallyStoredPhoneNumber = await getStoredPhoneNumber();
    locallyStoredPhoneNumber !== undefined
      ? authorizeFirebase(this.getFirebaseAccessToken) && this.props.authorizing(true)
      : this.setState({ newUser: true })
  }
  authInitialization();
}

I am promisifying the React Native AsyncStorage getItem method but I am being warned that it is returning a possible unhandled promise rejection. Here's what I'm doing, what's wrong with my code?

In App.js ComponentDidMount()

ponentDidMount() {
  ConnectyCube.init(...config);
  authInitialization = async () => {
    const locallyStoredPhoneNumber = await getStoredPhoneNumber();
    console.log(locallyStoredPhoneNumber);
    authorizeFirebase(this.getFirebaseAccessToken);
    this.props.authorizing(true);
  }
  authInitialization();
}

Then in localStorage.js

export const getStoredPhoneNumber = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem('@phone_number', (error, result) => {
      result ? resolve(result) : reject(error);
    })
  })
}

Thanks in advance.

UPDATE

I have now added error handling:

export const getStoredPhoneNumber = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem('@phone_number', (error, result) => {
      result ? resolve(result) : reject(error);
    })
  }).catch(error => console.error(error))
}

Seems to work - here's my extra logic that depends on the result of the AsyncStorage call:

ponentDidMount() {
  ConnectyCube.init(...config);
  authInitialization = async () => {
    const locallyStoredPhoneNumber = await getStoredPhoneNumber();
    locallyStoredPhoneNumber !== undefined
      ? authorizeFirebase(this.getFirebaseAccessToken) && this.props.authorizing(true)
      : this.setState({ newUser: true })
  }
  authInitialization();
}

• javascript
• reactjs
• react-native
• async-await
• asyncstorage

• i mean... nowhere in that code are you handling rejected promises. If a promise is rejected, and you're not handling it, it's "unhandled" – Kevin B Commented Aug 15, 2019 at 15:38
• Thanks @KevinB - I see that now - what I'm trying to do as you can see from the async function inside ponentDidMount is wait for the AsyncStorage call to be resolved and then move on through the rest of the function. – Mr. Robot Commented Aug 15, 2019 at 15:56
• And? you're still not handling any errors that might occur. It doesn't matter what you are trying to do, you have promises without error handling. That's all the error is telling you. – Kevin B Commented Aug 15, 2019 at 15:56
• So the reason I don't have a try catch block in the code is because I am attempting to promisify the result of the AsyncStorage call so I can make ComponentDidMount async. Maybe my question should have been how can I achieve what I just described. – Mr. Robot Commented Aug 15, 2019 at 16:01
• I was following the Signature in the Documentation. getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise – Mr. Robot Commented Aug 15, 2019 at 16:03

3 Answers 3

Seems like this should work:

async ponentDidMount() {
  ConnectyCube.init(...config);
  try {
    const locallyStoredPhoneNumber = await AsyncStorage.getItem('@phone_number');
    locallyStoredPhoneNumber !== undefined
      ? authorizeFirebase(this.getFirebaseAccessToken) && this.props.authorizing(true)
      : this.setState({ newUser: true })
  } catch (e){
    // handle error
  }
}

One way to handle promise rejection would be to use try...catch block where your promise is being returned.

try{
    const locallyStoredPhoneNumber = await getStoredPhoneNumber();
} catch(error){
    //Error handling code here
}

You need to 'catch' any errors which might be thrown and handle them (otherwise React will plain):

ponentDidMount() {
  authInitialization = async () => {
    try {
      const locallyStoredPhoneNumber = await getStoredPhoneNumber();
    ...
    } catch (e) {
      console.log(e) //handle error }
    }
    authInitialization();
  }
}