如何解决从商店发出AJAX请求
- 如何在商店内发出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());
,但它返回的是承诺而不是数据本身。
解决方法
由于它是可写存储,因此可以在其上调用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}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。