javascript - 如何使用 svelte 获取远程 API？

Question

我正在从 API 获取报价，并且获取似乎有效，因为第一个console.log被正确调用，但第二个不是。内容是json来自 API 的对象中的一个字段。

<script>
    import { onMount } from "svelte";
    let non = [];


    onMount(async function() {
        const res = await fetch("https://api.quotable.io/random");
        const json = await res.json();
        non.push(json);
        console.log(non);
    });

</script>

<div>
   {#each non as {content}}
   <p>{content}{console.log(content)}</p>
   {/each}
</div>

Answer 1

因为 Svelte 的响应性是由赋值触发的，所以使用数组方法（如push并且splice不会自动导致更新）。

在你的例子中，如果你用它替换non.push(json)它non = [json]似乎工作。

https://svelte.dev/tutorial/updating-arrays-and-objects

Answer 2

Svelte 的反应是由分配触发的。（来源：文档）

因此，如果您想将更多引号推入non，则必须使用non = [...non, json];

<script>
    import { onMount } from "svelte";
    let non = [];
    let gettingQuote = false;

    onMount(() => {
        getRandomQuote();
    });

    async function getRandomQuote() {
        gettingQuote = true;
        const res = await fetch("https://api.quotable.io/random");
        const json = await res.json();
        non = [...non, json];
        gettingQuote = false;
    }
</script>

<div>
    {#each non as {author, content}}
        <p>{content} - {author}</p>
    {/each}
    <button on:click={getRandomQuote} disabled={gettingQuote}>Get Quote</button>
    {#if gettingQuote}
        <span>Getting Quote...</span>
    {/if}
</div>

这是一个工作示例。