Así que estoy tratando de exportar/importar secuencias de comandos de model.js y uso esto
import * as model from './model.js';Aquí está el script de model.js
export const state = { recipe: {}, }; console.log(state.recipe); export const loadRecipe = async function (id) { try { const res = await fetch( `https://forkify-api.herokuapp.com/api/v2/recipes/${id}` ); const data = await res.json(); if (!res.ok) throw new Error(`${data.message} (${res.status})`); console.log(data); let { recipe } = data.data; console.log(recipe); } catch (err) { console.error(err); } };Esta es la parte de representación en la que intento acceder a la parte de la receta desde model.js.
const showRecipe = async function () { try { const id = window.location.hash.slice(1); if (!id) return; renderSpinner(recipeContainer); //1.Loading Recipe await model.loadRecipe(id); const { recipe } = model.loadRecipe.recipe;Estoy tratando de acceder a la parte de la receta aquí: const {receta} = model.loadRecipe;
Pero me estoy volviendo indefinido. Por favor, ayúdenme a identificar el problema, ¿se está exportando, importando o estoy accediendo a los datos de forma incorrecta? Además, ¿cómo debo insertar la parte de la receta en la receta estatal?
Muchísimas gracias.
export const state = { recipe: {}, }; console.log(state.recipe); export const loadRecipe = async function (id) { try { const res = await fetch( `https://forkify-api.herokuapp.com/api/v2/recipes/${id}` ); const data = await res.json(); if (!res.ok) throw new Error(`${data.message} (${res.status})`); console.log(data); state.recipe = data.data.recipe; console.log(recipe); } catch (err) { console.error(err); } }; await model.loadRecipe(id); const { recipe } = model.state;pero ¿por qué no desea devolver los datos y guardarlos en una variable? normalmente solo devolverá la receta de la función loadRecipe.
Puede importar los valores de model.js por separado.
import { state, loadRecipe } from './model'; Luego, puede leer el valor del state después de ejecutar el método loadRecipe() .
// ... await loadRecipe(id); console.log(state.recipe); Pero creo que te olvidas de establecer el valor de la recipe en la función loadRecipe() en model.js también.
// get the recipe ... // then ... state.recipe = recipe;Si lo pruebas con vainilla JS:
// model.js const loadRecipe = async function (id) { try { const res = await fetch( `https://forkify-api.herokuapp.com/api/v2/recipes/${id}` ); const data = await res.json(); if (!res.ok) throw new Error(`${data.message} (${res.status})`); console.log(data); let { recipe } = data.data; console.log(recipe); } catch (err) { console.error(err); } };...en otro archivo (call.js)...
const showRecipe = async function () { try { const id = window.location.hash.slice(1); if (!id) return; renderSpinner(recipeContainer); //1.Loading Recipe await model.loadRecipe(id); const { recipe } = model.loadRecipe.recipe;...en su archivo html...
<script type="text/javascript" src="model.js"></script> <script type="text/javascript" src="call.js"></script>