从商店发出 AJAX 请求
Make AJAX Request from Store
我有 3 个关于 Svelte Stores 的问题:
- 如何在商店内发出 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());
但它 return 是一个承诺而不是数据本身。
这是否是将数据从 API 加载到商店的正确方法,还是我应该在其他地方调用。
我如何以及何时使用 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}
我有 3 个关于 Svelte Stores 的问题:
- 如何在商店内发出 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());
但它 return 是一个承诺而不是数据本身。
这是否是将数据从 API 加载到商店的正确方法,还是我应该在其他地方调用。
我如何以及何时使用
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}