0

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

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

刷新数据的唯一方法是使用刷新操作创建自定义存储，该操作再次调用 getData() 但它似乎没有触发承诺。

我想删除旧数据和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}
4

1 回答 1

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}

于 2020-11-13T06:15:44.643 回答