Может ли приложение React обработать ошибку (код состояния 4xx) с помощью блока try catch - PullRequest
Новая
       104

Может ли приложение React обработать ошибку (код состояния 4xx) с помощью блока try catch

0 голосов
/ 03 мая 2020

Я изучаю React (с хуками) и столкнулся со странной проблемой. В настоящее время я работаю над приложением Notes (из FullStackOpen учитесь реагировать). Моя база данных принимает только заметки, длина содержимого которых превышает 4 символа. В случае недействительной заметки мой сервер перехватывает ValidationError и возвращает сообщение об ошибке с кодом состояния 401 вместо новой заметки. Моя цель - перехватить эту ошибку во внешнем интерфейсе и отобразить сообщение об ошибке.

Код бэкенда: 

try{
    const savedNote = await note.save()
    user.notes = user.notes.concat(savedNote._id)
    await user.save()

    response.json(savedNote.toJSON())

  } catch(e) { 
    //console.log(e.name)
    const msg = {error: 'too short!!!'}
    //console.log(msg)
    return response.status(401).json(msg)
  }

Проблема появляется, когда я пытаюсь получить данные на передней стороне приложения. Моя консоль разработки отображает Ошибка: запрос не выполнен с кодом состояния 401 независимо от того, что я делаю. Я не могу найти способ ввести блок catch спереди.

Код внешнего интерфейса для связи с сервером: 

const create = async newObject => {
  const config = { headers: { Authorization: token } }
  const response = await axios.post(baseUrl, newObject, config)
  console.log(response.data)
  return response.data
}

(...) 

const addNote = (event) => {
    event.preventDefault()
    try{      
      const noteObject = {
        content: newNote,
        date: new Date().toISOString(),
        important: Math.random() > 0.5
      }

      noteService
        .create(noteObject)
          .then(returnedNote => {
            setNotes(notes.concat(returnedNote))
            setNewNote('')
            setErrorMsg('')
            setUserNotes(userNotes.concat(returnedNote))
      })    
    } catch (e) {///<----how to get there          
      setErrorMsg('note too short! minimum 5 characters')
      setNewNote('')
      setTimeout(() => {
        setErrorMsg(null)
      }, 5000)
    }
  }

Буду признателен за некоторые советы.

Решение:

Цепные обещания - .catch () 

const addNote = (event) => {
    event.preventDefault()
      const noteObject = {
        content: newNote,
        date: new Date().toISOString(),
        important: Math.random() > 0.5
      }

      noteService
        .create(noteObject)        
        .then(returnedNote => {
            setNotes(notes.concat(returnedNote))
            setNewNote('')
            setErrorMsg('')
            setUserNotes(userNotes.concat(returnedNote))
        })
        .catch(e => {
          setErrorMsg('note too short! minimum 5 characters')
          setNewNote('')
          setTimeout(() => {
          setErrorMsg(null)
          }, 5000)
        })
  }

1 Ответ

0 голосов
/ 03 мая 2020

Поместите блок try, catch вокруг вашего вызова API: 

try {
  const response = await axios.post(baseUrl, newObject, config)
} catch (e) {
  // handle error
}

С другой стороны, я не рекомендую использовать 401 в качестве недопустимого кода состояния, поскольку он имеет зарезервированный значение несанкционированного. Вместо этого используйте 400 (неверный запрос). Определения кодов состояния: https://httpstatuses.com/

...