2

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

我尝试将 url（JSON 文件的位置）作为属性传递给组件，并在组件本身的 promise 中获取它，好处是我可以使用 {{#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 中领取财产。（我可以吗？）

我认为实现此行为的另一种方法是在观察者中包装一个承诺（Rich Harris在此处提出了这一建议）。但是，如果确实有一种访问方式，那么不使用 {{#await}} 似乎很可惜，dataUrl因为这（理论上）是处理showcaseData组件加载时间设置的最简洁的方式。

谁能看到这可能的方法？

4

1 回答 1

3

您可以使用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

于 2018-03-04T02:32:04.023 回答