Possible Unhandled Promise Rejection (id:0) Warning

Question

I am getting the following warning message when my AsyncStorage Item is empty "Possible Unhandled Promise Rejection (id:0)" So my question is: How can I handle a promise rejection?

My code:

componentDidMount() {
        try {
            // This warning only appears when 'connections' item is empty
            AsyncStorage.getItem('connections').then((token) => {
                token = JSON.parse(token);

                const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
                const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];

                const ds = new ListView.DataSource({
                    rowHasChanged: (r1, r2) => r1 !== r2,
                    sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
                    getSectionData,
                    getRowData,
                });

                const {dataBlob, sectionIds, rowIds} = this.formatData(token);

                this.setState({
                    dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
                });
            });
        }catch(error) {
            console.log(error);
        }
    }

Answer 1

You need to catch the reject of the promise:

componentDidMount() {
  // This warning only appears when 'connections' item is empty
  return AsyncStorage.getItem('connections').then((token) => {
    token = JSON.parse(token);

    const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
    const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];

    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
      getSectionData,
      getRowData,
    });

    const { dataBlob, sectionIds, rowIds } = this.formatData(token);

    this.setState({
      dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
    });
  }).catch(error => {
    console.log(error);
  })
}