在Svelte CSR应用的script标签中直接调用API是否可行？

第一种写法完全可行（推荐） #

你的第一段代码写法是Svelte官方推荐的异步数据处理方式，完全可以正常工作：

<script>
    const data = api.getDataAsync()
</script>

{#await data}
   <span>Loading</span>
{:then data}
   <!-- display data -->
{/await}

原因是Svelte的{#await}块原生支持直接接收Promise，会自动跟踪Promise的三种状态（pending/fulfilled/rejected），帮你处理加载态、数据展示甚至错误捕获（你还可以加上{:catch err}块处理错误）。这种写法更简洁，符合Svelte的语法设计理念，不需要手动维护状态变量。

第二种写法可行但冗余 #

你提到的类似React的写法是可以运行的，但属于冗余写法：

<script>   
   let data = $state(undefined)
   onMount(()=>{
       api.getDataSync().then(apiData=>data=apiData)
   })
</script>
{#if !data}
   <span>loading...</span>
{:else}
   <!-- display data -->
{/if}

这种写法是把React的思维带到了Svelte里，虽然能实现功能，但没必要——Svelte已经通过{#await}提供了更优雅的异步处理方案。不过如果你的场景需要在数据加载完成后执行额外逻辑（比如更新其他状态、调用其他API），这种手动管理状态的方式也可以用，但不是最优选择。

补充说明（针对PocketBase+关闭SSR） #

因为你已经关闭了SSR，所有代码都在客户端执行，两种写法都不会有SSR相关的问题，但第一种写法依然是更符合Svelte最佳实践的选择。

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