Yielded components
Ember Await provides several components you can use inside in <Await /> and can use the same component many times.

Initial

Renders only while the deferred promise is still waiting to be run, or you have not provided any promise.

Arguments

  • persist boolean Show until we have data, even while loading or when an error occurred. By default it hides as soon as the promise starts loading.

Examples

1
<Await defer={{this.deferFn}} as |await|>
2
<await.Initial>
3
<p>This text is only rendered while `run` has not yet been invoked on `defer`.</p>
4
</await.Initial>
5
</Await>
Copied!

Pending

This component renders only while the promise is pending (loading / unsettled).
Alias: <Await.Loading>

Arguments

  • initial boolean Show only on initial load (when data is undefined).

Examples

1
<Await promise={{this.promise}} as |await|>
2
<await.Pending>
3
<p>This text is only rendered while awaiting for promise resolution</p>
4
</await.Pending>
5
</Await>
Copied!

Fulfilled

This component renders only when the promise is fulfilled (resolved to a value, could be undefined).
Alias: <Await.Resolved>

Yielded properties

  • data any Result from resolved promise

Arguments

  • persist boolean Show old data while loading new data. By default it hides as soon as a new promise starts.

Examples

1
<Await promise={{this.promise}} as |await|>
2
<await.Fulfilled as |data|>
3
The result is: {{data}}
4
</await.Fulfilled>
5
</Await>
Copied!

Rejected

This component renders only when the promise is rejected.

Yielded properties

  • error Error Error from rejected promise

Arguments

  • persist boolean Show old error while loading new data. By default it hides as soon as a new promise starts.

Examples

1
<Await promise={{this.promise}} as |await|>
2
<await.Rejected as |error|>
3
The error is: {{error.message}}
4
</await.Rejected>
5
</Await>
Copied!

Settled

This component renders only when the promise is settled (resolved or rejected).

Arguments

  • persist boolean Show old error or data while loading new data. By default it hides as soon as a new promise starts.

Examples

1
<Await promise={{this.promise}} as |await|>
2
<await.Settled>
3
Request has been settled
4
</await.Settled>
5
</Await>
Copied!