Как я могу получить ошибку при получении, чтобы показать код статуса http?

Question

У меня есть компонент реагирования, и я делаю сетевой вызов, чтобы установить состояние.В конце концов я хочу передать это другим дочерним компонентам, но в данный момент просто заставляю сантехнику работать.

Я пытаюсь правильно отлавливать ошибки при обращении к своему бэкэнду (серверу экспресс в приложении).).Я попытался вызвать ошибку, извлекая данные из конечной точки, которая не существует.Это должно выбросить 404, так как он не существует, верно?Как я могу получить эту ошибку в операторе catch?Прямо сейчас моя ошибка SyntaxError: Unexpected token < in JSON at position 0 at eval (app.js:61)

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() { 
    fetch('/api/wrong_endpoint').then((data) => {
      return data.json();
    }).then((body) => {
      this.setState({data: body})
    }).catch(err => console.log(err));

  }

  render() {
    console.log('logging the states');
    console.log(this.state.data);
    return (
      <div>
        <ContactList />
        <ContactDetail />
        <AddContactModal />
      </div>
    );
  }
}

Answer 1

Я постараюсь идти шаг за шагом

1. fetch метод не выдает ошибку, даже если вы получите коды ответа 4xx или 5xx.Пожалуйста, внимательно прочитайте о Fetch API, я полагаю, вы можете найти много интересного, о чем вы не знаете.

2. Вы можете легко проверить ответстатус следующий (пожалуйста, прочитайте об объекте Response и его методах / свойствах):

fetch('/api/wrong_endpoint').then((response) => {
    console.log('status code', response.status)
})

Трудно сказать, действительно ли ваш сервер возвращает код 404, потому что я не знаю ваших настроек экспресс.Если вы установите какой-нибудь обработчик отката, например, app.get('*', ...), он также может вернуть 200 кодов успеха.Вы можете проверить статус ответа и его тело в devTools браузера.Но я полагаю, что лучше, если вы настроите хотя бы свой /api маршрутизатор так, чтобы он выдавал ошибку 404, если запрошенный /api/... маршрут не найден.

В чем я действительно уверенв том, что ваш сервер возвращает некоторую HTML-разметку в ответе.И вы пытаетесь проанализировать ее как строку JSON через data.json(), и, конечно, вы получите синтаксическую ошибку, поскольку это не JSON (формат HTML начинается с символа <, следовательно, ошибка: SyntaxError: Unexpected token <)

Answer 2

Как правило, если вы используете API выборки, ошибки 40x и 50x не будут переходить в последующие блоки, поскольку обещание при выборке отклоняет только сетевые ошибки (не ошибки HTTP или что-либо еще). Следовательно, запрос данных из «неправильной» конечной точки будет обрабатываться в первом блоке then.

Я бы порекомендовал вам воспользоваться проверкой своего http ответа на основе свойства Response.Ok. Успешные ответы будут обрабатываться в этом условии, тогда как любые другие ответы (ok: false) будут обрабатываться в другом утверждении.

fetch('/api/wrong_endpoint')
  .then(response => {
    console.log(response) // full response body
    console.log(response.status); // get only the response.status
    if (!response.ok) {
      // http errors 40x and 50x will go into this statement
      // do something to handle it
    } else if (response.ok) {
      // handles status code 200
    }
  })
  .then(
    // ...