我使用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)
中我只有信息,没有对象、数组。 .. 为什么这些东西不同?如何获取正确的错误响应值来显示错误消息?
最佳答案
当连接正常时,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 的正确方法,并且仍然需要处理网络错误。
关于javascript - 如何正确捕获 axios get 请求中的错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50058808/