Sveltekit & Fetching data to use in HTML

Question

我觉得我错过了一些明显的东西，但我一生都无法弄清楚我错过了什么。我实际上是在尝试在调用中执行 fetch 调用，然后在页面中使用该数据。我无法让数据在页面上实际工作。如果我在标签中 console.log 它可以工作，但是一旦我尝试在 HTML 中，我就会得到未定义。知道我做错了什么吗？感谢您的帮助！

<script>
let gameinfo = async (chardata) => {
        chardata = toTitleCase(chardata);

        const gamedetails = await fetch('https://api.igdb.com/v4/games', {
            method: 'POST',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-type': 'application/json'
            },
            body: `fields *;\nwhere name= "${chardata}";`
        })
            .then((res) => res.json())
            .then((gamedata) => {
                gamedata.map((e) => {
                    console.log(e);
                });
                return gamedata;
            })
            .catch((e) => {
                console.log(e);
            });
    };

    export let gameJson = gameinfo('Snatcher');
</script>

返回映射变量的控制台日志。

以及 html 中的调用：

<main>
    <div class="mainContent">
        <div class="contentBlock">
                {console.log(gameJson)}
        </div>
    </div>
</main>

返回未定义

Answer 1

首先你没有返回gamedetails。

对于gameinfo，应该在onMount的回调中调用await获取gameJson

import { onMount } from 'svelte'

let gameinfo = async (chardata) => {
  chardata = toTitleCase(chardata);

  const gamedetails = await fetch('https://api.igdb.com/v4/games', …)

  // you can verify it’s not undefined here
  console.log('check:', gamedetails)
  return gamedetails
}

export let gameJson

onMount(async () => {
  gameJson = await gameinfo('Snatcher')
})