代码之家 › 专栏 › 技术社区 › Miro

从应用商店发出AJAX请求

svelte-store svelte

Miro · 技术社区 · 5 年前

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

这是将数据从API加载到存储区的正确方法还是我应该在其他地方进行调用。
我怎么用,什么时候用 export default testsStore; 我试着用另一个例子,它抛出说 store.js isn't exporting testsStore

0 回复 | 直到 5 年前

rixo 5 年前

因为它是一个可写的商店,你可以打电话给 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 商店。可读存储器将其初始值作为第一个参数,“生命周期”函数作为第二个参数。生命周期函数接收 设置 函数更改存储值,但存储本身不公开或 更新

例如:

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}

推荐文章

Alex · 在轻量级中同时解构和不解构变量

11 月前

Y-jiji · 调整大小时替换了假选择

11 月前

opensas · SvelteKit:使用vitest时出现错误invite.config.js:“没有重载匹配此调用”

1 年前

Leonardo Cavalcante · Svelte 5:当对图像使用条件渲染时,表单在页面加载时短暂出现然后消失

1 年前

Localghost · 我如何在sveltekit的开发和发布版本中拥有单独的功能?

1 年前

Michael · 单击单选按钮后,保存按钮不会立即更新

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Michael · 将可读存储添加到可写存储

1 年前

Sam Sabin · 是否可以将Svelte{#each}循环的结果限制一定的量?

1 年前

SuperSIlly2 · Svelte/TS通过foreach循环应用样式不会修改样式

1 年前