svelte - 从商店发出 AJAX 请求

Question

我有 3 个关于 Svelte 商店的问题:

如何在商店内发出ajax请求？我尝试使用以下内容:

REPL Demo

//store.js

import { writable } from 'svelte/store';

let data = [];

const apiURL = "https://jsonplaceholder.typicode.com/todos";

async function getData(){
    const response = await fetch(apiURL);
    data = (await response.json()).slice(0,20);
    console.log('Response:', data);
}
getData();

export const testsStore = writable(data);

请求通过，但数据永远不会传递到导出。我见过的所有示例都使用没有 async/await 的静态数据。我也试过 return data; 和 writable(getData()); 但它返回一个 promise 而不是数据本身。

这是否是将数据从 API 加载到商店的正确方法，还是我应该在其他地方进行调用。

我如何以及何时使用 export default testsStore; 我尝试从另一个示例中使用它，但它抛出说 store.js isn't exporting testsStore

Answer 1

由于它是一个可写的存储，您可以在其上调用 set 或 update 来更改数据(请参阅 docs )。
例如:

import { writable } from 'svelte/store';

const apiURL = "https://jsonplaceholder.typicode.com/todos";

async function getData(){
    const response = await fetch(apiURL);
    const data = (await response.json()).slice(0,20);
      testStore.set(data) // <================================
}
getData();

export const testStore = writable([])

但是， readable 商店似乎可以更好地为这个特定用例提供服务。可读存储将其初始值作为第一个参数，将“生命周期”函数作为第二个参数。 lifecyle 函数接收一个 set 函数来更改 store 值，但 store 本身不公开 set 或 update 方法(因此它不能从外部写入)。
例如:

import { readable } from 'svelte/store';

const apiURL = "https://jsonplaceholder.typicode.com/todos";

const getData = async () => {
    const res = await fetch(apiURL)
    if (!res.ok) throw new Error('Bad response')
    const items = await res.json()
    return items.slice(0, 20)
}

export const todos = readable([], set => {
    // called when the store is first subscribed (when subscribers goes from 0 to 1)
    getData()
        .then(set)
        .catch(err => {
            console.error('Failed to fetch', err)
        })
    return () => {
        // you can do cleanup here if needed
    }
})

最后，在 .svelte 组件中，您可以使用 $ 为存储添加前缀以直接访问它们的值。使用这种表示法，Svelte 将在需要时自动订阅存储，并在组件销毁时取消订阅。
因此，在您的示例中，使用上面我们可读的 todos 存储，您可以将组件更改为简单的:

<script>
  import { todos } from './store.js';
</script>

<h1>Todos:</h1>

{#each $todos as item}  
  <p>{item.title}</p>
{/each}