使用 JavaScript 通过 Spoonacular API 规划餐食和菜谱

熟悉如何在 JavaScript 中使用 Spoonacular API 获取和利用食谱数据。

掌握使用Spoonacular API高效搜索、获取和分析食谱的核心要点。

探索使用Spoonacular API进行搜索、计算份量以及查找食材替代品。

运用你的技能，通过Spoonacular API搜索并获取详细的杂货产品数据。

仔细查看Spoonacular API提供的营养、口味、厨具、食材和价格数据的各类小工具。

按照以下步骤在 React 中集成 Spoonacular API，处理 CORS 问题，并使用 Hooks： 1. 获取 Spoonacular API 密钥 访问 [Spoonacular 官网](https://spoonacular.com/food-api) 注册账号并获取免费的 API 密钥。 2. 在项目中安装必要的依赖 使用 npm 或 yarn 安装 axios 用于发起 HTTP 请求： ```bash npm install axios ``` 3. 创建一个自定义 Hook 来封装 API 调用 在 `hooks/useRecipeSearch.js` 中创建如下代码： ```javascript import { useState, useEffect } from 'react'; import axios from 'axios'; const useRecipeSearch = (query, dietaryRestrictions = '') => { const [recipes, setRecipes] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchRecipes = async () => { try { setLoading(true); const response = await axios.get('https://api.spoonacular.com/recipes/complexSearch', { params: { query, diet: dietaryRestrictions, number: 10, apiKey: process.env.REACT_APP_SPOONACULAR_API_KEY, }, }); setRecipes(response.data.results); } catch (err) { setError(err.message); } finally { setLoading(false); } }; if (query) { fetchRecipes(); } }, [query, dietaryRestrictions]); return { recipes, loading, error }; }; export default useRecipeSearch; ``` 4. 在组件中使用自定义 Hook 在 `App.js` 或其他组件中引入并使用该 Hook： ```javascript import React, { useState } from 'react'; import useRecipeSearch from './hooks/useRecipeSearch'; function App() { const [query, setQuery] = useState(''); const [diet, setDiet] = useState(''); const { recipes, loading, error } = useRecipeSearch(query, diet); return ( <div> <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="输入食材或菜名" /> <select value={diet} onChange={(e) => setDiet(e.target.value)}> <option value="">无限制</option> <option value="vegetarian">素食</option> <option value="vegan">纯素</option> <option value="gluten-free">无麸质</option> </select> {loading && <p>加载中...</p>} {error && <p>错误：{error}</p>} <ul> {recipes.map(recipe => ( <li key={recipe.id}> <h3>{recipe.title}</h3> <img src={recipe.image} alt={recipe.title} width="100" /> </li> ))} </ul> </div> ); } export default App; ``` 5. 配置环境变量 在项目根目录创建 `.env` 文件，添加 API 密钥： ``` REACT_APP_SPOONACULAR_API_KEY=your_api_key_here ``` 6. 处理 CORS 问题 Spoonacular API 支持跨域请求，但需确保通过正确的 API 密钥调用。若在本地开发时遇到 CORS 错误，请确认： - 确保已正确设置 `apiKey`。 - 不要直接在浏览器中测试未配置代理的请求（如使用 `fetch` 或 `axios` 直接请求）。 - 若仍存在问题，可使用代理服务器（如 `proxy` 字段在 `package.json` 中配置）来绕过 CORS 限制。 7. 启动应用 运行项目： ```bash npm start ``` 完成以上步骤后，即可在 React 应用中成功调用 Spoonacular API，实现搜索食谱功能，并通过自定义 Hook 简化状态管理与数据获取逻辑。

将 Spoonacular API 与 JavaScript 集成以获取食谱和购物清单的各个部分组合起来。

学习如何使用Spoonacular API参数进行膳食计划和食谱定制。