Question

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

我尝试将一个url（JSON文件的位置）作为属性传递给组件，然后在组件内部的promise中进行拾取，这样做的好处是我可以使用{{#awa}}}块处理组件内的状态。

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

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

在Showcase组件中，我使用Promise作为属性（参见Svelte docs here），使用{{#awa}}}块为组件提供状态。

    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}}似乎很遗憾，因为这（理论上）是处理{{1}的设置的最简洁方法当组件加载时。

有人能看到这种可能吗？

Answer 1

您可以使用从computed派生的dataUrl属性：

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

（请注意，由于fetch已经返回Promise，因此我们无需将其包装在新的Promise中并调用fulfil。）

在这里演示：https://svelte.technology/repl?version=1.56.0&gist=24fc0d0fb6ee9b73c736018ab4a00fe6

Await Block / Promise / Fetch用于将JSON数据传递给Svelte组件

1 个答案: