Svelte：如何在组件中处理自定义可写存储的异步初始化承诺？

Question

我有几个 Svelte 组件和一个自定义 writtable 商店。商店有一个 init 函数，它是 async 并且用一些 REST API 的数据库 table 的数据填充商店的值。我的组件必须全部使用自动订阅订阅此商店。在订阅时，必须调用 init。全局的想法是在数据库上实现 CRUD 操作，在商店上执行 CRUD 操作（有助于显示商店的价值，即数据库的 table，具有反应性）。

由于 init 是 async，因此，returns 是一个承诺，我需要在我的组件中 .then .catch 它。但是由于我使用自动订阅（通过在商店名称前加上 $ 前缀），我该怎么做呢？

例如：App.svelte（组件）：

<script>
    import { restaurant_store } from './Restaurant.js'
    export let name
</script>

<main>
    
    <!--- I need to handle the promise and rejection here -->
    {#each $restaurant_store as restaurant}
        <li>
            {restaurant.name}
        </li>
    {/each}
    

</main>

Restaurant.js（店铺）：

import { writable } from 'svelte/store'

export function createRestaurantsStore() {
    const { subscribe, update } = writable({ collection: [] })

    return {
        subscribe,

        init: async () => {
            const response = await fetch('http://localhost:1337/restaurants')

            if(response.ok) {
                const json_response = await response.json()
                set({ collection: json_response })
                return json_response
            }

            throw Error(response.statusText)
        },

        insert: async (restaurant) => {
            const response = await fetch('http://localhost:1337/restaurants', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(restaurant)
            })

            if(response.ok) {
                const json_response = await response.json()
                update(store_state => store_state.collection.push(json_response))
                return json_response
            }

            throw Error(response.statusText)
        },

        update: async (restaurant, id) => {
            const response = await fetch('http://localhost:1337/restaurants/' + id, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(restaurant)
            })

            if(response.ok) {
                const json_response = await response.json()
                update(store_state => {
                    const current_id = store_state.collection.findIndex(e => e.id === id)
                    store_state.collection.splice(current_id, 1, json_response)
                })
                return json_response
            }

            throw Error(response.statusText)

        }

    }
}

export const restaurant_store = createRestaurantsStore()

Answer 1

Svelte 提供了一个 built-in mechanism 来处理模板中可能的 promise 状态，因此它看起来像这样：

<main>
    {#await restaurant_store.init()}
        <p>waiting for the promise to resolve...</p>
    {:then}
      {#each $restaurant_store as restaurant}
        <li>
          {restaurant.name}
        </li>
      {/each}
    {:catch error}
        <p>Something went wrong: {error.message}</p>
    {/await}
</main>

查看 REPL 以获取实际示例。

Svelte：如何在组件中处理自定义可写存储的异步初始化承诺？

Svelte: How to handle the custom writtable store's async init's promise in the component?

svelte

svelte-component

svelte-store

svelte-3