相关疑难解决方法(0)

我有一个页面（动态路由），我在其中从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么？我尝试过的事情：

1. 使用await 块。我返回一个获取函数的承诺，然后在正常的脚本标记中，导出一个承诺变量。然后，我在操作数据后手动解决这个承诺。

<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);
        }); …

我在 SvelteKit 中有一个加载函数。它获取一些数据。

有没有办法可以在加载函数解析之前显示加载程序？或者有一些 SSG 会在 SSR 解决后更新？任何可以让流程更加顺畅的方法，而不是无法向用户返回反馈......

<script context="module">
        export const async load = ({ fetch }) => {
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            return {
                data: await response.json()
            }
        }
</script>

<script>
        export let data;
</script>

<img src={data.message} alt="Dog image" />

我想要一个加载程序直到加载完成或一些默认数据值直到加载完成以获得更好的用户体验。我不想将其移至 onMount，因为我想在 SSR 上调用 api。

我正在寻找初始 CSR 的组合，直到 SSR 加载完成。我希望这也适用于初始加载，而不仅仅是在导航时。