javascript - Possible Unhandled Promise Rejection (id: 0) React Native AsyncStorage - Stack Overflow

admin管理员组

文章数量:1384858

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

Share Improve this question Follow edited Aug 6, 2020 at 15:13 Olcay Ertaş 6,24688 gold badges8282 silver badges116116 bronze badges asked Aug 15, 2019 at 15:36 Mr. RobotMr. Robot 1,84499 gold badges3737 silver badges9595 bronze badges 13

• 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

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 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();
  }
}

本文标签： javascriptPossible Unhandled Promise Rejection (id 0) React Native AsyncStorageStack Overflow