async-request

A pipe function for rxjs 6+ which emits a three-state 'async-request' with a typed loading/success/error status object

Motivation

A common use case for consuming streams is displaying a loading animation, the data itself on success or a failure message when it errors. This pipe is meant to reduce boiler-plate to a minimum and expose these three states in an easy to consume way.

Example usage

    this.httpQuery$ = this.http.get<string>("./api/text").pipe(asAsyncRequest<string, HttpErrorResponse>());

    this.httpQuery$.subscribe(response => {
      switch (response.state) {
        case "loading":
          showLoadingAnimation();
          break;
        case "success":
          showData(response.value);
          break;
        case "error":
          showError(response.value.message);
          break;
      }
    });

it gets even better when binding in views like in angular with the async pipe:

    <span *ngIf="(httpQuery$ | async) as response">
      <ng-container [ngSwitch]="response.state">
        <ng-container *ngSwitchCase="'loading'">loading data...</ng-container>
        <ng-container *ngSwitchCase="'success'">{{response.value}}</ng-container>
        <ng-container *ngSwitchCase="'error'">{{response.value}}</ng-container>
      </ng-container>
    </span>