在 redux 中进行 fetch 调用时处理错误

Question

我正在构建一个天气应用程序，用于返回特定城市的天气详细信息。输入有效位置后，一切正常。当我在搜索字段中输入垃圾字符串（例如“afasdfldsakfh”）并按 Enter 时，就会出现我的问题。这是有道理的，因为 api 调用不应该找到该位置。

我在控制台中收到以下错误：

Uncaught TypeError: Cannot read property 'observation_location' of undefined

这来自 RECEIVE_WEATHER 情况下的减速器。当有效负载无效并且缺少为我的状态设置道具所需的信息时，我不确定我需要做什么。任何帮助将不胜感激，谢谢！

export function receiveWeather(json) {
  console.log(json);
  return {
    type: RECEIVE_WEATHER,
    payload: json
  };
};

export function fetchingWeather(location) {
  const init = {
    method: 'GET'
  };
  return dispatch => {
    dispatch(requestWeather())
    return fetch(weatherUrl + location + '.json', init)
      .then(response => response.json())
      .then(json => dispatch(receiveWeather(json)))
  };  
};

export function weather(state = {
  isFetching: false,
  city: '',
  country: '',
  weather_image: '',
  weather_description: '',
  weather_number: '',
  wind_dir: '',
  wind_speed: '',
  humidity: '',
  precipitation: ''
}, action) {
  switch (action.type) {
    case REQUEST_WEATHER:
      return Object.assign({}, state, {
        isFetching: true
      });
    case RECEIVE_WEATHER:
      return Object.assign({}, state, {
        isFetching: false,
        city: (action.payload.current_observation.observation_location.full),
        country: (action.payload.current_observation.observation_location.country),
        weather_image: (action.payload.current_observation.icon_url),
        weather_description: (action.payload.current_observation.weather),
        weather_number: (action.payload.current_observation.temp_c),
        wind_dir: (action.payload.current_observation.wind_dir),
        wind_speed: (action.payload.current_observation.wind_kph),
        humidity: (action.payload.current_observation.relative_humidity),
        precipitation: (action.payload.current_observation.precip_today_in)
      });
    default:
      return state
  };
};

Answer 1

在您的 fetch 调用中使用附加错误处理程序，如下所示：

return fetch(weatherUrl + location + '.json', init)
  .then(response => response.json())
  .then(json => dispatch(receiveWeather(json)))
  .catch(err => handleError(err))

我不知道您正在使用fetch 的什么实现，但API 上通常有catch 或error 方法。

您还可以添加一个这样处理错误的案例：

case RECEIVE_WEATHER_ERROR: 
   return ...

在这种情况下，您也可以在错误处理程序中分派错误

return fetch(weatherUrl + location + '.json', init)
  .then(response => response.json())
  .then(json => dispatch(receiveWeather(json)))
  .catch(err => dispatch(handleError(err)))

handleError 可以像其他函数一样实现：

function handleError(err) {
  return {
    type: RECEIVE_WEATHER_ERROR,
    payload: err
  }
}

如果您没有收到错误，而是一个空的 json 对象，其中 payload.current_observation 未定义

在您的案例陈述中添加以下内容：

case RECEIVE_WEATHER:
  if (!action.payload.current_observation) return state
  ...