Usage
Use <Await /> component to load your data in your components. You can take advantage of Yielded Components, like Pending, Fulfilled or Rejected to define your UI based on promise state, example:
1
<Await @promise={{this.fetchPosts}} as |await|>
2
<await.Pending>
3
Loading posts...
4
</await.Pending>
5
6
<await.Fulfilled as |posts|>
7
{{#each posts as |post|}}
8
{{post.title}}
9
{{/each}}
10
</await.Fulfilled>
11
12
<await.Rejected>
13
Something went wrong :(
14
</await.Rejected>
15
</Await>
Copied!
You can also control the state yourself using Yielded properties, where you can access isPending, isRejected etc...
1
<Await @promise={{this.fetchPosts}} as |await|>
2
<div class={{if await.isPending "loading"}}>
3
Hey there :) This text will spin when content is loading.
4
</div>
5
</Await>
Copied!
Your @promise can be anything. A promise, function which returns promise, a task (from ember-concurrency) or normal string. Sky is the limit.
You can also load the promise on demand using @defer:
1
<Await @defer={{this.fetchPosts}} as |await|>
2
<button {{on "click" await.run}}>Load posts</button>
3
4
<await.Fulfilled as |posts|>
5
{{#each posts as |post|}}
6
{{post.title}}
7
{{/each}}
8
</await.Fulfilled>
9
</Await>
Copied!
For more useful patterns in Ember Await check out the rest of the documentation and visit React Async for reference.
More Guides are coming soon!
Copy link