Try catch not catching await error

React
1

Hi. I am doing the “Mastering React” course and I am on the “Calling Backend Services” section, lecture 25. My issue is that the try catch block isn’t catching the 404 error when I try to delete a movie that doesn’t exist from the database. Instead it shows up as an error in the console. Here’s my code:

// movieServices.js
export function deleteMovieDB(movieId) {
    http.delete(`${config.apiEndpoint}/movies/${movieId}`)
}

// movies.jsx
handleDelete = async (movie) => {
    const originalMovies = [...this.state.movies]
    const movies = originalMovies.filter(m => m._id !== movie._id);
    this.setState({ movies });

    try {
      await deleteMovieDB(movie._id)
    }

    catch(ex) {
      // This doesn't seem to actually catch the error
      if (ex.response && ex.response.status === 404)
        toast.error("This movie has already been deleted")

      this.setState(originalMovies)
    }
  }
2

What’s the error you are seeing in the console?

3

I’ve met this bug before. Just simply return the delete method from the function and you will successfully fix it.

export function deleteMovieDB(movieId) {
    return http.delete(`${config.apiEndpoint}/movies/${movieId}`)
}