等待 Block/Promise/Fetch 将 JSON 数据传递给 Svelte 组件

Question

Svelte 中的 {{#await}} 块在这一点上是相当新的，所以这个用例可能还不是可以使用这种方法实现的。

我试图将 url（JSON 文件的位置）作为属性传递给组件，并在组件本身的承诺中获取它，好处是我可以利用 {{#await}} 块来处理组件内的状态。

该组件正在更大的组件中使用，如下所示：

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

在 Showcase 组件中，我将 Promise 用作属性（参见 Svelte 文档 here）以使用 {{#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)
                })
            )
        }
    }
}

问题是我无法在 Promise 中获取 dataUrl 属性。（我可以吗？）

我认为实现此行为的另一种方法是在观察者中包装承诺（Rich Harris 建议 here）。但是，如果确实有一种方法可以访问 dataUrl，那么不使用 {{#await}} 似乎是一种耻辱，因为这（理论上）是处理 [=16= 设置的最简洁的方法] 加载组件时。

任何人都可以看到这可能的方法吗？

Answer 1

您可以使用从 dataUrl:

派生的 computed 属性

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

（请注意，由于 fetch 已经 returns 一个 Promise，我们不需要将其包装在一个新的 Promise 中并调用 fulfil。）

此处演示：https://svelte.technology/repl?version=1.56.0&gist=24fc0d0fb6ee9b73c736018ab4a00fe6

等待 Block/Promise/Fetch 将 JSON 数据传递给 Svelte 组件

Await Block/Promise/Fetch for passing JSON data to Svelte component

javascript

svelte