JavaScript从导入的脚本访问数据

Question

所以我试图从model.js导出/导入脚本，我使用这个

import * as model from './model.js';

这是模型的脚本。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);
  }
};

这是渲染部分，我试图从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;

我试图在这里访问配方部分：const{recipe}=model。装载配方；

但我正在变得不明确。请帮助我确定问题，是导出、导入还是我以错误的方式访问数据？另外，我应该如何将配方部分推送到状态配方？

非常感谢你。

Answer 1

如果你用香草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);
    }
};

...在另一个文件（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;

...在您的html文件中。。。

<script type="text/javascript" src="model.js"></script> 
<script type="text/javascript" src="call.js"></script> 

Answer 2

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;

但是为什么你不想返回数据并将其保存到变量中呢？通常，您只需从loadRecipe函数返回食谱。

Answer 3

您可以分别从model.js导入值。

import { state, loadRecipe } from './model';

然后，可以在运行loadRecipe（）方法后读取state值。

// ...
await loadRecipe(id);
console.log(state.recipe);

但是，我认为您忘记了在模型中的loadRecipe（）函数中设置recipe值。js也一样。

js prettyprint-override">// get the recipe ...
// then ...
state.recipe = recipe;