Создание кнопки обновления для обновления ajax в store.js и триггеры обещают {#await}

Я пытаюсь сделать кнопку обновления, чтобы обновить содержимое из 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}

svelte svelte-3 svelte-store
person Miro    schedule 12.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, ваша главная ошибка в том, что 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}

person Stephane Vanraes    schedule 13.11.2020