Yielded components

Search…

Introduction

Getting started

Installation

Guides

API

Misc

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!