SvelteKit调用Fetch获取的数据在HTML模板中返回undefined问题求助

问题核心原因 #

• 你的gameinfo异步函数没有显式返回请求结果，函数执行完默认返回值为undefined，最终Promise的兑现值就是undefined
• 直接把异步函数的调用结果赋值给变量，Svelte模板不会自动解析Promise的值，异步请求完成后也不会触发页面的响应式更新

解决方案1：使用Svelte原生{#await}语法处理异步数据 #

这种方案不需要额外声明响应式变量，直接在模板层处理异步的加载、成功、失败三种状态：

<script>
let gameinfo = async (chardata) => {
        chardata = toTitleCase(chardata);
        // 补充return，把请求结果返回给函数调用方
        return 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) => {
                // 单纯遍历用forEach更合适，map是用来生成新数组的
                gamedata.forEach((e) => {
                    console.log(e);
                });
                return gamedata;
            })
            .catch((e) => {
                console.log(e);
                // 出错时返回空数组，避免后续渲染报错
                return []
            });
    };

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

<main>
    <div class="mainContent">
        <div class="contentBlock">
            {#await gameJson}
                <span>数据加载中...</span>
            {:then data}
                <!-- 这里的data就是接口返回的完整数据，可直接渲染 -->
                {console.log(data)}
                {#each data as item}
                    <p>游戏名称：{item.name}</p>
                {/each}
            {:catch err}
                <span>数据加载失败</span>
            {/await}
        </div>
    </div>
</main>

解决方案2：用响应式变量存储请求结果 #

如果不想在模板里写await块，也可以在请求完成后手动给响应式变量赋值，触发页面更新：

<script>
// 声明响应式变量，初始值设为空数组
export let gameJson = [];

let gameinfo = async (chardata) => {
        chardata = toTitleCase(chardata);
        try {
            const res = await fetch('https://api.igdb.com/v4/games', {
                method: 'POST',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Content-type': 'application/json'
                },
                body: `fields *;\nwhere name= "${chardata}";`
            })
            const gamedata = await res.json()
            gamedata.forEach(e => console.log(e))
            // 给响应式变量赋值，触发模板更新
            gameJson = gamedata
        } catch(e) {
            console.log(e)
            gameJson = []
        }
    };

// 组件初始化时调用请求
gameinfo('Snatcher');
</script>

<main>
    <div class="mainContent">
        <div class="contentBlock">
                {console.log(gameJson)}
                {#each gameJson as item}
                    <p>游戏名称：{item.name}</p>
                {/each}
        </div>
    </div>
</main>

额外注意 #

如果后续请求出现跨域报错，建议把这个接口请求放到SvelteKit的服务端Load函数中发起，避免客户端跨域限制。

内容的提问来源于stack exchange，提问作者sylargaf