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

Question

我正在尝试从 api 获取数据，该 api 应该返回一个带有一组食谱的 json 对象。我在前端使用 React hooks 和 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();
}, []);

我已经删除了钩子声明，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（与 fetch 不同）时，您不必在响应上调用 res.json()，因为 axios 会自动为您处理。这意味着 axios 默认将响应解析为 JSON。

async/await with Axios