Как обработать 404 с кастомным ответом для пользователя через библиотеку axios?

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

Понимаю как дать кастомный ответ пользователю, если делать запрос через 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>}

Ответы

▲ 0

Вам не обязательно напрямую делать reject() запроса, чтобы отобразить свой текст об ошибке. Вы можете в рендере проверить есть ли вообще ошибка и если есть, тогда вывести ваше сообщение:

{error && <div>Ваш текст с ошибкой</div>}