Как обработать 404 с кастомным ответом для пользователя через библиотеку axios?
Понимаю как дать кастомный ответ пользователю, если делать запрос через fetch, но не могу найти теперь выход как это сделать, если используешь axios?
export class PokemonInfo extends Component {
state = {
pokemonCustom: null,
loading: false,
error: null,
close: false,
};
componentDidUpdate(prevProps, _) {
const prevName = prevProps.pokemonName;
const currName = this.props.pokemonName;
if (currName !== prevName) {
this.setState({ loading: true, pokemonCustom: null });
axios
.get(`https://pokeapi.co/api/v2/pokemon/${currName}`)
.then((pokemon) => {
this.setState({ pokemonCustom: pokemon });
})
.catch((error) => this.setState({ error }))
.finally(() => this.setState({ loading: false }));
}
}
render() {
const { loading, pokemonCustom, error } = this.state;
const { pokemonName } = this.props;
return (
<div>
{error && <div>{error.response.data}</div>}
{loading && <Loading />}
{pokemonName === "" && <div>Я жду пока ты начнешь меня искать</div>}
{pokemonCustom && (
<div>
<img
src={pokemonCustom.data.sprites.other["official-artwork"].front_default}
width="300px"
alt="pokemon"
/>
<h2>{pokemonCustom.data.name}</h2>
</div>
)}
</div>
);
}
}
Если делать запрос через fetch, картина будет такова
fetch(`https://pokeapi.co/api/v2/pokemon/${currName}`)
.then(response => {
if(response.ok) {
return response.json()
} else {
return Promise.reject(throw new Error('Такой вид покемона не найден'))
}
})
.then(pokemon => this.setState({pokemonCustom: pokemon}))
.catch(error => this.setState({error}))
И после в объекте error на свойстве message будет отображаться тот самый кастомный ответ, не могу понять как проделать ту же работу, если я использую axios для запроса
{error && <div>{error.message}</div>}
Источник: Stack Overflow на русском