使用await时页面无预期反应，请问我的代码哪里存在错误？

问题原因 #

• 核心错误是 {#await} 语法仅支持接收 Promise类型 的值，你当前的apiData是Svelte的writable可写存储实例，不是Promise，所以{#await}不会按照你的预期等待请求完成再渲染。
• 次要问题：你给onMount加了async修饰符，但内部没有使用await语法，属于不必要的声明。
• 潜在风险：pozoviRestServis是回调风格的异步方法，如果调用过程中出现异常没有做捕获处理，可能会导致静默失败看不到报错。

修复方案 #

方案1：继续使用writable store，去掉{#await} #

如果你的apiData本身是需要全局共享的存储，直接按store的用法渲染即可：
JS部分补全声明和异常捕获：

import { writable } from 'svelte/store';
import { onMount } from 'svelte';

const apiData = writable(null);
// 可选：新增错误状态处理异常
const requestError = writable(null);

onMount(() => {
    // 假设pozoviRestServis支持传错误回调，不支持的话自行包裹try/catch
    pozoviRestServis(mojUrl, ucitajSve, (err) => {
        requestError.set(err);
    });
}); 

// 这里不需要async修饰，内部没有用到await逻辑
function ucitajSve(data, mojUrl) {
    apiData.set(data);
}

HTML部分直接用store自动订阅语法：

{#if $requestError}
    <p>请求出错：{$requestError.message}</p>
{:else if $apiData}
    <!-- 此处替换为你的实际数据渲染逻辑 -->
    <div>数据加载完成：{$apiData}</div>
{:else}
    <p>wait</p>
{/if}

方案2：使用{#await}，去掉store #

如果你的数据不需要跨组件共享，直接用Promise配合{#await}更简洁：
JS部分先把回调风格的请求封装为Promise：

import { onMount } from 'svelte';

let apiDataPromise;

function pozoviRestServisPromise(url) {
    return new Promise((resolve, reject) => {
        pozoviRestServis(url, (data) => resolve(data), (err) => reject(err));
    });
}

onMount(() => {
    apiDataPromise = pozoviRestServisPromise(mojUrl);
}); 

HTML部分补全{#await}的全分支逻辑即可：

{#await apiDataPromise}
    <p>wait</p>
{:then data}
    <!-- 此处替换为你的实际数据渲染逻辑 -->
    <div>数据加载完成：{data}</div>
{:catch err}
    <p>请求出错：{err.message}</p>
{/await}

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