Try..catch blokları asenkron değildir. Aynı mantığı asenkron olarak yazmak için promise fonksiyonunuza chaining yapmalısınız. Asenkron axios isteğini awaitle beklemenize gerek kalmadan axios.request() fonsiyonunda yaptığınız işlemin sonuna .catch() ekleyerek sardığınız catch bloğunun görevini, .finally() ekleyerek de finally bloğunda yapmak istediğinizi yapmış olacaksınız.
https://developer.mozilla.org/en-US/.../Promise/catch https://developer.mozilla.org/en-US/...romise/finally
Ama size önerim hazır öğreniyoken direk data fetching'i tanstack react query ile öğrenin daha az kod yazarak daha okunabilir daha sağlam kod yazmış olursunuz.
Aslında aşağıda ilk başta böyle yapmıştım ama bu da çalışmamıştı, o yüzden axios ile en son yaptım
onst getDetails = async () => {
setIsLoading(true);
setDetails([]);
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
"X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
},
};
await fetch(
`https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
options, { signal: controller.signal }
)
.then((response) => response.json())
.then((response) => {
setDetails(response[0]);
console.log(response[0]);
console.log(params.id)
}).then(()=> {
setIsLoading(false)
})
};
useEffect(() => {
getDetails();
controller.abort()
}, [params.id]);