如何通过异步 function 使用 Svelte 的反应性

Question

I want to display a list of data that I read (asynchronously) from files

The following emulates what I am trying to achieve REPL

<h1>Test array</h1>

{#each my_list as item}
    <div>{item}</div>
{/each}

<script>
    let started = false;
    let my_list = [];
    let param = 0;
    $: my_list = analyseData(param);
    
    setTimeout(function(){
        param = 1;
    }, 5000);
    
function analyseData() {
    if (!started) {
        started = true;
        return [0];
    }
    // read files asynchronously here
        return [1, 2, 3];
}
</script>

But, of course, the function analyseData needs to be async, and as soon as I change to

async function analyseData() { 
...

it no longer works. What is the solution?

Answer 1

Svelte implements an Await Block for just this purpose.

Long hand including catch for your example would be:

{#await my_list}
    <p>...waiting</p>
{:then resolved_list}
    {#each resolved_list as item}
        <div>{item}</div>
    {/each}
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Or since your example will never reject you can use the shorthand:

{#await my_list then resolved_list}
    {#each resolved_list as item}
        <div>{item}</div>
    {/each}
{/await}

REPL