使用Axios和Async/Await分析嵌套的JSON

Question

我正试图从一个api中获取数据，该api应该返回一个带有配方数组的json对象。我使用前端的React挂钩和Axios来执行请求。钩子运行，但我在尝试从响应访问json数组时出错。

以下是示例api响应：

{
count: 30,
recipes: [objects, ... 29]
}

以及我的代码来获得配方响应：

const fetchRecipes = async () => {
try {
const recipeData = await Axios.get(api);
console.log(recipeData);
const recipes = await recipeData.json(); // error occurs here
setRecipes(recipes);
setLoading(false);
} catch (err) {
console.log(`Error occurred fetching recipes ${err}`)
}
};
useEffect(() => {
fetchRecipes();
}, []);

我已经删除了hook声明，api url是https://api.myjson.com/bins/t7szj。问题在于从响应中获取数组。我的api调用有问题吗？

这是错误消息：

Error occurred fetching recipes TypeError: recipeData.json is not a function

Answer 1

你试过这个吗？

const fetchRecipes = async () => {
try {
const recipeData = await Axios.get(api);
console.log(recipeData.data);
const recipes = recipeData.data;
setRecipes(recipes);
setLoading(false);
} catch (err) {
console.log(`Error occurred fetching recipes ${err}`)
}
};

使用axios时，您不必对响应调用res.json(((与fetch不同(，因为axios会自动为您处理。这意味着axios默认解析对JSON的响应。

使用Axios 异步/等待