我有一个页面(动态路由),我从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么。我尝试过的事情:
<script context="module">
export async function load({ fetch, page }) {
let collectionId = page.params.id;
let endpoint = url;
const promise = fetch(endpoint);
return {props:{promise}};
}
</script>
然后在普通的脚本标签中<script>
export let promise = new Promise(() => '');
promise = new Promise((resolve, reject) => {
promise.then(function (response) {
if(response.ok){
console.log('response');
response.json().then(function (json) {
console.log('data in promise');
console.log(json);
let posts = json.map((post) => new Post(post));
posts = posts.sort(function (a, b) {
return a.id - b.id;
});
resolve(posts);
});
}else{
response.text().then((text)=>reject(text));
}
});
});
</script>
然后在 HTML{#await promise}
<Shimmer items="3" />
{:then posts}
<Cards data={posts} />
{:catch error}
<Error message={error}/>
{/await}
这第一次工作正常,我猜,这在页面呈现服务器端时工作。但是在随后的调用中,我的 promise 解析逻辑不会被调用,并且我直接在 await block 中接收到 promise,没有逻辑来操作它。
let posts;
{#if posts===undefined}
Loading...
{:else}
{posts}
{/if}
最佳答案
所以我通过使用 navigating
解决了这个问题。店铺。我不知道这是否是正确的方法。但这对我来说似乎很好。
在页面被服务器渲染并且控制传递到客户端之后,navigating
从一页导航到另一页时,store 为 true。 (Read More)
所以在我的 __layout.svelte 中,我正在做{#if $navigating} Loading... {:else} Content {/if}
关于javascript - SvelteKit-如何在后续调用中正确显示服务器渲染页面中的加载指示器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68160941/