制作一个刷新按钮来更新store.js中的ajax并触发{#wait}promise

Question

我正在尝试制作一个刷新按钮来更新store.js中的内容。store从获取请求中获取数据。

我试着取消订阅和订阅，但似乎不起作用。

唯一能刷新数据的是创建一个带有刷新操作的自定义存储，该操作再次调用getData((，但似乎不会触发promise。

我想删除旧数据和每次提取/刷新新数据时出现的Loading...文本。

我该怎么做？这就是我目前所拥有的：

REPL

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

let testsStorePromise;

let unsubscribe = testsStore.subscribe(data => {
testsStorePromise = data;
});
function refresh(){
unsubscribe();

unsubscribe = testsStore.subscribe(data => {
testsStorePromise = data;
});
}        
</script>
<button on:click="{refresh}">Refresh</button>
<h1>
Todos:
</h1>
{#await testsStorePromise}
<p style="color: blue">LOADING...</p>
{:then todos}
{#each todos as item}  
<p>{item.title}</p>
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

Answer 1

您的主要错误似乎是testStorePromise现在实际上不再是一个承诺，而只是获取的结果。

解决这个问题的一种方法是将您的可写存储更改为

export const testsStore = writable(getData);

然后在等待中调用此"值">

{#await testsStorePromise()}

然而，如果你考虑到以上内容，上面的大部分代码都不再需要了，你只需要一个简单的重新分配：

<script>
const apiURL = " https://deelay.me/500/https://jsonplaceholder.typicode.com/todos";

// helper to reduce duplication
const fetchData = fetch(apiURL).then(res => res.json())

// initial fetch
let testPromise = fetchData

async function refresh() {
// re-assigning will also restart the promise chain
testPromise = fetchData
}

</script>

请注意，现在您有了一个真正的承诺，所以您必须使用{#await testPromise}