从商店发出AJAX请求

问题描述

关于svelte商店，我有3个问题：

1. 如何在商店内发出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);

请求通过，但数据从未传递到导出。我见过的所有示例都使用静态数据而没有异步/等待。我也尝试过return data;和writable(getData());，但它返回的是承诺而不是数据本身。

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

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

解决方法

由于它是可写存储，因此可以在其上调用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函数来更改存储值，但是存储本身不会公开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}