Как я могу заставить свою ошибку выборки отображать код состояния http?
У меня есть компонент реакции, и я делаю сетевой вызов, чтобы установить состояние. В конце концов я хочу передать это другим дочерним компонентам, но на данный момент просто заставляю работать сантехнику.
Я пытаюсь правильно отловить ошибки при вызове моего бэкэнда (экспресс-сервера в приложении). Я попытался вызвать ошибку, извлекая данные из конечной точки, которой не существует. Это должно вызвать ошибку 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.info(err));
}
render() {
console.info('logging the states');
console.info(this.state.data);
return (
<div>
<ContactList />
<ContactDetail />
<AddContactModal />
</div>
);
}
}
Вы пытаетесь распечатать код/сообщение об ошибке или что-то в этом роде?
@charlietfl хорошо. Достаточно ли стандартно проверять такой статус и печатать ошибку? Это где я делаю сетевой вызов, не так ли? В конечном итоге этот код будет перемещен из компонента в какой-либо файл, предназначенный для связи с сервером.
@wentjun да, это то, что я пытаюсь сделать.
Да... вам нужно создать собственную шаблонную обработку ошибок при использовании fetch(). Я предпочитаю, чтобы библиотека сделала это за меня. Также упрощает публикацию данных
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
постараюсь идти поэтапно
fetchметод не выдает ошибку, даже если вы получаете коды ответа 4xx или 5xx. Пожалуйста, внимательно прочитайте оFetch API, я думаю, вы можете найти много интересного, о чем вы не знали.Вы можете легко проверить статус ответа следующим образом (пожалуйста, прочитайте об объекте
Responseи его методах/свойствах):
fetch('/api/wrong_endpoint').then((response) => {
console.info('status code', response.status)
})
Трудно сказать, действительно ли ваш сервер возвращает код 404, потому что я не знаю вашей экспресс-настройки. Если вы установите какой-нибудь резервный обработчик, например
app.get('*', ...), он также может вернуть код успеха 200. Вы можете проверить статус ответа и его тело в devTools браузера. Но я считаю, что лучше настроить хотя бы свой/apiроутер так, чтобы он возвращал ошибку 404, если запрошенный/api/...маршрут не найден.В чем я действительно уверен, так это в том, что ваш сервер возвращает HTML-макет в ответе. И вы пытаетесь разобрать его как строку JSON через
data.json()и, конечно же, получаете синтаксическую ошибку, поскольку это не JSON (разметка html начинается с символа<, отсюда и ошибка:SyntaxError: Unexpected token <)
Хороший подробный ответ
Как правило, если вы используете fetch API, ошибки 40x и 50x не попадут в последующие блоки, так как обещание от fetch отклоняет только сетевые ошибки (а не ошибки HTTP или что-то еще). Поэтому запрос данных из «неправильной» конечной точки будет обрабатываться в первом блоке then.
Я бы порекомендовал вам использовать проверку тела ответа http на основе свойства Response.Ok. Успешные ответы будут обрабатываться в рамках этого условия, тогда как любые другие ответы (ok: false) будут обрабатываться в другом операторе.
fetch('/api/wrong_endpoint')
.then(response => {
console.info(response) // full response body
console.info(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(
// ...
Взгляните на документы негодяй. Это библиотека-оболочка для
fetch(). Она ответит на ваш вопрос и, возможно, вам будет интересно использовать ее для обработки ошибок. 404 не перейдет кfetch()catch, если вы не проверите статус (прежде чем вернутьdata.json()и выдать свою собственную ошибку