Question

我使用openweathermap API来预测。应用程序基于ReactJS和Redux。我遇到了catch错误的问题。我想在搜索到的数据库中没有城市时为用户创建警报。所以，我有以下行动：

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

即使有401不允许或404未找到，看起来API在连接正常时仍会返回200（成功）。在开发工具网络标签中查看以下网址：

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的正确方法仍然必须处理网络错误。

如何正确捕获axios get请求中的错误？

1 个答案: