Sveltekit 和正在获取要在 HTML 中使用的数据

Question

我觉得我遗漏了一些明显的东西，但我终究无法弄清楚我遗漏了什么。我本质上是在尝试在调用中执行提取调用，然后在页面中使用该数据。我无法让数据在页面上实际工作。如果我在标签中 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>

哪个 returns 控制台记录映射变量。

以及 html 中的调用：

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

其中 returns 未定义

Answer 1

首先你没有returngamedetails.

对于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')
})

Sveltekit 和正在获取要在 HTML 中使用的数据

Sveltekit & Fetching data to use within HTML

javascript

fetch

svelte

sveltekit