SvelteKit输入搜索时响应式fetch请求不更新问题咨询

代码存在两个核心问题：

• 输入框未与query变量建立双向绑定：当前代码仅将初始query值赋值给input的value属性，没有同步用户输入内容到query变量的逻辑，用户键入内容时query始终为初始值，依赖query变更触发的响应式语句$:不会执行，自然不会重新调用接口。
• 缺少边界容错逻辑：当query为空、接口返回无匹配结果时，直接读取towns.results[0].name会抛出JS错误，导致页面渲染中断。

<script lang="ts">
    let query: string = ""

    // query非空时才发起请求，避免无效请求
    $: towns = query 
        ? fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${query}&language=de`)
            .then((response) => response.json())
        : Promise.resolve(null)
</script>

<!-- 双向绑定输入值到query，输入时自动触发变量更新 -->
<input bind:value={query} type="text" placeholder="Suchen" class="input input-bordered w-full max-w-xs mb-8"/>

<pre><code>
    {#await towns}
        加载中
    {:then res}
        {#if res?.results?.length}
            {res.results[0].name}
        {:else if query}
            未查询到匹配城镇
        {:else}
            请输入搜索关键词
        {/if}
    {:catch error}
        请求失败
    {/await}
</code></pre>

• 给输入框添加bind:value={query}双向绑定语法，这是Svelte框架处理表单值同步的标准写法，用户输入时会自动更新query变量值，变量变更会自动触发$:标记的响应式逻辑重新执行，实现输入即重新请求的效果。
• 新增空query判断，避免输入框为空时发起无效请求。
• 新增返回结果空值判断，避免无匹配结果时访问数组下标报错，阻断页面渲染。

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