React Hooks & Async Await： Handling errors with Axios call

Question

我是hooks和async/await的新手。我正在尝试处理Axios调用中的错误，我不确定如何使用then/catch或try/catch来处理API调用的错误。

在基于类的React中，我会处理这样的错误：

componentDidMount() {
axios.get('url')
.then((res) => {
// handle response here
})
.catch((err) => {
//handle error here
})
};

使用useEffect和async/await时，如何处理Axios错误处理？我看到过使用try/catch的示例，但我无法在代码中使用它。

如何将错误处理添加到以下API调用：

useEffect(() => {
const fetchData = async () => {
setLoading(true);
const data =  await axios.get(`https://realtor.p.rapidapi.com/properties/v2/list-for-rent?sort=relevance&city=Miami&state_code=FL&limit=100&offset=0`, headers);
const properties = data.data.properties;
console.log(properties);
/// Iterates through data and grabs all the data for house listings
const listings =  properties.map((listing, index) => {
const arr = [];
arr.push(
listing.listing_id,
listing.address.line, 
listing.address.city, 
listing.address.county, 
listing.address.neighborhood_name, 
listing.address.state,
listing.year_built,
listing.address.lat,
listing.address.lon);
arr.push(listing.photos.map((photo) => {
return photo.href;
}));
return arr;
});
// House listing data is put into houseData
//getHouseData(listings);
setListings(listings);
setLoading(false);
}
fetchData();
}, [])

Answer 1

以下是关于axios的内容。它回报的是承诺，而不是价值。您需要使用它来处理错误。为此，您需要then()和catch()方法。示例：

useEffect(() => {
const fetchData = async () => {
setLoading(true);
await axios.get(`https://realtor.p.rapidapi.com/properties/v2/list-for-rent?sort=relevance&city=Miami&state_code=FL&limit=100&offset=0`, headers).then((response)=>{
/* DO STUFF WHEN THE CALLS SUCCEEDS */
setLoading(false);
}).catch((e)=>{
/* HANDLE THE ERROR (e) */
});
}
fetchData();
}, [])

基本上，您告诉promise：如果调用成功，请在then中运行函数，并将响应作为参数。如果失败，请在catch中运行函数，并将异常作为参数。然后，启动fetchData((。你需要处理你在then块内收到的数据，因为promise不会直接返回它。如果有问题，它会进入catch块，你在那里处理你的错误(也许在状态中设置一条错误消息并显示它？(。

这是异步编程的重要组成部分，对我来说仍然有点模糊，但这是一个更好的开始，可以更熟练地处理您的错误。