Component <Await />
Defined in: warp-drive-packages/ember/src/-private/await.gts:143
The <Await /> component allow you to utilize reactive control flow for asynchronous states in your application.
Await is ideal for handling "boundaries", outside which some state is still allowed to be unresolved and within which it MUST be resolved.
See Async as Reactive State for the pattern it supports: store the promise and derive its state.
import { Await } from '@warp-drive/ember';
<template>
<Await @promise={{@request}}>
<:pending>
<Spinner />
</:pending>
<:error as |error|>
<ErrorForm @error={{error}} />
</:error>
<:success as |result|>
<h1>{{result.title}}</h1>
</:success>
</Await>
</template>The <Await /> component requires that error states are properly handled.
If no error block is provided and the promise rejects, the error will be rethrown asynchronously (a tick after the render that observed the rejection) instead of crashing the current render. It remains an uncaught error that crash-reporting instrumentation can observe. Prefer providing an <:error> block -- the template-require-request-error-block ESLint rule flags a missing one statically.
Extends
default<AwaitSignature<T,E>>
Type Parameters
T
T
E
E
Constructors
Constructor
new Await<T, E>(owner: Owner, args: {
promise: | Promise<T>
| Awaitable<T, E>;
}): Await<T, E>;Parameters
owner
Owner
args
promise
| Promise<T> | Awaitable<T, E>
Returns
Await<T, E>
Inherited from
Component<AwaitSignature<T, E>>.constructor
Properties
error
Get Signature
get error(): E;Defined in: warp-drive-packages/ember/src/-private/await.gts:154
The rejection reason, once state has errored.
Returns
E
result
Get Signature
get result(): T;Defined in: warp-drive-packages/ember/src/-private/await.gts:161
The resolved value, once state has succeeded.
Returns
T
state
Get Signature
get state(): Readonly<PromiseState<T, E>>;Defined in: warp-drive-packages/ember/src/-private/await.gts:147
The reactive PromiseState for the awaited promise.
Returns
Readonly<PromiseState<T, E>>