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

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})
        });
    };

还有我的 reducer :

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 未找到。在开发工具网络选项卡中查看以下网址:

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 的正确方法，并且仍然需要处理网络错误。