title: Await Block/Promise/Fetch for passing JSON data to Svelte component
body: <p>The {{#await}} block in Svelte is fairly new at this point so this use case may not be one that can be achieved using this method yet.</p>
  
  <p>I tried to pass a url (location of a JSON file) to a component as a property and pick it up within a promise inside component itself, the benefit being that I can make use of the {{#await}} block to handle the state within the component.</p>
  
  <p>The component is being used within a larger component like so:</p>
  
  <pre><code>&lt;Showcase dataUrl="/js/showcase.json" /&gt;
  </code></pre>
  
  <p>Within the Showcase component I'm using a Promise as a property (see in Svelte docs <a href="https://svelte.technology/guide#await-blocks" rel="nofollow noreferrer">here</a>) to give the component a state using the {{#await}} block.</p>
  
  <pre><code>    export default {
      data() {
          return {
              showcaseData: new Promise(fulfil =&gt; fetch(dataUrl)
                  .then(res =&gt; res.json())
                  .then(data =&gt; ({
                      data: data.assets
                  }))
                  .then(res =&gt; {
                      fulfil(res.data)
                  })
              )
          }
      }
  }
  </code></pre>
  
  <p>The problem is that I can't pick up the <code>dataUrl</code> property within the Promise. (Can I?)</p>
  
  <p>The other way I can see as being an option to achieve this behaviour is to wrap a promise in an observer (Rich Harris suggests this <a href="https://github.com/sveltejs/svelte/issues/654#issuecomment-345514247" rel="nofollow noreferrer">here</a>). However, it seems a shame not to use an {{#await}} if there is actually a way to access <code>dataUrl</code> because this would (in theory) be the most concise way to handle the setting of <code>showcaseData</code> when the component loads.</p>
  
  <p>Can anyone see a way that this might be possible?</p>