Await Block/Promise/Fetch для передачи данных JSON в компонент Svelte

Question

Блок {{#await}} в Svelte является довольно новым на этом этапе, поэтому этот вариант использования может быть еще не тем, который может быть достигнут с помощью этого метода.

Я попытался передать URL-адрес (расположение файла JSON) компоненту как свойство и выбрать его внутри обещания внутри самого компонента, преимущество в том, что я могу использовать блок {{#await}} для обработки состояние внутри компонента.

Компонент используется внутри более крупного компонента, например:

<Showcase dataUrl="/js/showcase.json" />

В компоненте Showcase я использую Promise как свойство (см. Здесь документацию по Svelte), чтобы дать компоненту состояние с помощью блока {{#await}}.

    export default {
    data() {
        return {
            showcaseData: new Promise(fulfil => fetch(dataUrl)
                .then(res => res.json())
                .then(data => ({
                    data: data.assets
                }))
                .then(res => {
                    fulfil(res.data)
                })
            )
        }
    }
}

Проблема в том, что я не могу подобрать dataUrl недвижимость в рамках Promise. (Могу я?)

Другой способ, с помощью которого я вижу вариант достижения такого поведения, - это обернуть обещание в наблюдателя (Рич Харрис предлагает это здесь). Однако стыдно не использовать {{#await}}, если на самом деле есть способ доступа dataUrl потому что это (в теории) будет наиболее кратким способом справиться с настройкой showcaseData когда компонент загружается.

Кто-нибудь может увидеть, как это возможно?

Answer 1

Вы можете использовать computed свойство, полученное из dataUrl:

<script>
  export default {
    computed: {
      showcaseData: showcaseUrl => {
        return fetch(dataUrl)
          .then(res => res.json())
          .then(data => data.assets);
      }
    }
  };
</script>

(Обратите внимание, что с fetch уже возвращает обещание, нам не нужно заключать его в новое обещание и вызывать fulfil.)

Демонстрация здесь: https://svelte.technology/repl?version=1.56.0&gist=24fc0d0fb6ee9b73c736018ab4a00fe6