Как правильно отлавливать ошибки в axios get request?

Question

Я использую openweathermap API, чтобы получить прогноз. Приложение основано на ReactJS и Redux. У меня проблема с ошибками перехвата. Я хочу создать оповещение для пользователей, когда искомый город не существует в базе данных. Итак, у меня есть действие, как показано ниже:

export function fetchWeather (city) {
    const url = `${ROOT_URL}&q=${city}`;
    const request = axios.get(url);

    return (dispatch) => {
        request
         .then(({data}) => {
            dispatch({type: FETCH_WEATHER, payload: data})
         })
         .catch((error) => { 
            dispatch({type: FETCH_WEATHER_ERROR, payload: error})
        });
    };

И мой редуктор:

import { FETCH_WEATHER, FETCH_WEATHER_ERROR } from '../actions/index';

export default function (state = [], action) {
    switch (action.type) {
    case FETCH_WEATHER:
     console.log(action.payload) //I receive object, so it's ok
        return [...state, action.payload];

    case FETCH_WEATHER_ERROR: 
     console.log(action.payload) // I receive just info in console "Error: Request failed with status code 404"
        return state;
    }
    return state;
}

Итак, это работает правильно, но мне любопытно, как получить правильный объект в части ошибки, чтобы просто показать предупреждение с информацией о сообщении, что случилось неправильно. Потому что, когда я проверяю вкладку инспектора (Сети), в ответ появляется хороший объект {cod: "404", message: "city not found"}, но в console.log(action.payload) У меня есть только информация, нет объекта, массив ... Почему эти вещи разные? Как получить правильное значение ответа на ошибку, чтобы показать сообщение об ошибке?

Answer 1

Похоже, что API всегда будет возвращать 200 (успех), когда соединение работает, даже если 401 не разрешен или 404 не найден. Проверьте следующий URL-адрес во вкладке сети инструментов разработчика:

http://samples.openweathermap.org/data/2.5/weather?q=nomatterNoApiKey

Так что все, что попадется в ловушку, является реальной проблемой сети.

request
.then((response) => {
  if(response.cod===200){
    dispatch({type: FETCH_WEATHER, payload: response.data});
  }else{
    dispatch({type: FETCH_WEATHER_ERROR, payload: response.message});
  }
})

Вы должны убедиться, что это правильный способ использования API, и по-прежнему иметь дело с сетевыми ошибками.