title: Issues with combining async await with try catch
body: <p>I'm currently refactoring a CheckIn process app. I want to trigger a different modal to open and change 2 states when a status returns <code>200</code>. I keep coming across &quot;Unhandled Promise Rejection&quot; when I try to combine <code>async await</code> with <code>try catch</code> block. I refactored the code from <code>fetch().then()</code> and I am not sure I did this correctly. I tried 2 different ways so far and I'm still getting the same error. Is there a better way to handle this?</p>
  <pre><code>class CheckIn extends Component {
      _reservationOpacity = new Animated.Value(0)
  
      constructor(props) {
          super()
  
          this.state = {
              modalVisible: false,
              modalOtherVisible: false,
              seatAvailable: false,
              refreshing: false,
              data: null,
          }
      }
      
      onScanPress = (payload) =&gt; {
          class HttpError extends Error {
              constructor(response) {
                  super(`${response.status} for ${response.url}`)
                  this.name = &quot;HttpError&quot;
                  this.response = response
              }
          }
  
          async function loadJson(url, payload) {
              let response = await fetch(url, {
                  method: &quot;POST&quot;,
                  headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
                  body: JSON.stringify(payload),
              })
              if (response.status == 200) {
                  
                  //
                  // I get &quot;Possible Unhandled Promise Rejection&quot; with  
                  // TypeError: Cannot read property 'setState' of undefined
                  // for both instances
                  //
                  // Trial 1:
                  
                  // const res = response.json()
                  
                  // if (res.isCheckedIn === &quot;check-in&quot;) {
                  //     console.log(&quot;Seat is available check-in---\n&quot;, data)
  
                  //     this.setState({ data: res, seatAvailable: true })
                  //     this.showResponse()
                  //     return res
                  // }
                  // if (res.isCheckedIn === &quot;checked-out&quot;) {
                  //     console.log(&quot;User is already checked-in---\n&quot;, data)
                      
                  //     this.showOtherResponse()
                  //     return res
                  // } 
                  
                  //
                  // Trial 2:
                  //
                  // return response.json().then((res) =&gt; {
                  //  if (res.isCheckedIn === &quot;check-in&quot;) {
                  //      console.log(&quot;Seat is available check-in---\n&quot;, data)
  
                  //      this.setState({ data: res, seatAvailable: true })
                  //         this.showResponse()
                  //  }
                  //     if (res.isCheckedIn === &quot;checked-out&quot;) {
                  //         console.log(&quot;User is already checked-in---\n&quot;, data)
                          
                  //         this.showOtherResponse()
                  //     } 
                  // })
              }else {
                  throw new HttpError(response)
              }
          }
  
          this.setState({ refreshing: true }, async () =&gt; {
              let check
              try {
                  check = await loadJson(
                      `http://localhost:9000/api/check`,
                      payload
                  )
              } catch (err) {
                  if (err instanceof HttpError &amp;&amp; err.response.status == 404) {
                      console.log(&quot;404&quot;)
                      this.setState(
                          {
                              data: null,
                              seatAvailable: false,
                              refreshing: false,
                          },
                          this.showResponse()
                      )
                  } else {
                      // unknown error, rethrow
                      throw err
                  }
              }
              return check
          })
      }
  
      showOtherResponse() {
          this.setState({ modalOtherVisible: true }, () =&gt; {
              Animated.timing(this._reservationOpacity, {
                  toValue: 1,
                  duration: 200,
                  useNativeDriver: true,
              }).start()
          })
      }
  
      showResponse() {
          this.setState({ modalVisible: true }, () =&gt; {
              Animated.timing(this._reservationOpacity, {
                  toValue: 1,
                  duration: 200,
                  useNativeDriver: true,
              }).start()
          })
      }
  
  
      render() {
          const {
              modalVisible,
              modalOtherVisible,
              data,
              seatAvailable,
          } = this.state
  
          return (
              &lt;&gt;
                  &lt;View style={styles.container}&gt;
                      &lt;View style={styles.buttonContainer}&gt;
                          &lt;TouchableOpacity
                              style={styles.buttonTouchable}
                              onPress={() =&gt;
                                  this.onScanPress({
                                      email: &quot;name@gmail.com&quot;,
                                      name: &quot;Jeff&quot;,
                                      description:
                                          &quot;Location #1&quot;,
                                  })
                              }
                          &gt;
                              &lt;Text style={styles.buttonText}&gt;
                                  Location #1
                              &lt;/Text&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  {modalOtherVisible &amp;&amp; (
                      &lt;Animated.View
                          style={{
                              ...StyleSheet.absoluteFill,
                              zIndex: 3,
                              opacity: this._reservationOpacity,
                          }}
                      &gt;
                          &lt;Response
                              data={data}
                              seatAvailable={seatAvailable}
                          /&gt;
                      &lt;/Animated.View&gt;
                  )}
  
                  {modalVisible &amp;&amp; (
                      &lt;Animated.View
                          style={{
                              ...StyleSheet.absoluteFill,
                              zIndex: 3,
                              opacity: this._reservationOpacity,
                          }}
                      &gt;
                          &lt;ResponseRedux
                              data={data}
                          /&gt;
                      &lt;/Animated.View&gt;
                  )}
              &lt;/&gt;
          )
      }
  }
  
  export default CheckIn
  </code></pre>