Skip to main content

OpraHttpClient

Ready-to-use HTTP client. Wires FetchBackend automatically — no configuration required beyond a service URL.

import { OpraHttpClient } from '@opra/client';

const client = new OpraHttpClient('https://api.example.com');

Extends HttpClientBase. All HTTP methods (get, post, patch, put, delete, request) and fetchDocument are inherited from it.

Constructor​

new OpraHttpClient(serviceUrl: string, options?: FetchBackend.Options)
ParameterTypeDescription
serviceUrlstringBase URL of the OPRA service
optionsFetchBackend.OptionsOptional — interceptors, default headers/params

Properties​

PropertyTypeDescription
serviceUrlstringResolved base URL (trailing slash normalized)
defaultsFetchBackend.RequestDefaultsDefault headers and query params applied to every request
const client = new OpraHttpClient('https://api.example.com', {
  defaults: {
    headers: new Headers({ Authorization: 'Bearer token' }),
    params: new URLSearchParams({ version: '2' }),
  },
});

Observable and Promise​

Every HTTP method returns an HttpRequestObservable, which supports both Observable and Promise usage. You can choose whichever fits your codebase — the underlying request is identical either way.

Promise (async/await)​

.getBody() and .getResponse() are Promise shortcuts. Best for one-shot requests.

// Body only
const orders = await client.get<Order[]>('orders').getBody();

// Full response — status, headers, and body
const res = await client.post<Order>('orders', payload).getResponse();
console.log(res.status, res.body);

Observable (RxJS)​

HttpRequestObservable extends RxJS Observable, so you can pipe it through any operator. Useful in reactive contexts — Angular AsyncPipe, combining streams, or cancellation via takeUntil.

import { switchMap } from 'rxjs';

userId$.pipe(
  switchMap(id => client.get<User>(`users/${id}`)),
).subscribe(user => console.log(user));
// Angular template — no manual subscription needed
orders$ = client.get<Order[]>('orders');
// <li *ngFor="let o of orders$ | async">

Progress events​

Upload/download progress is only available through the Observable path:

import { filter } from 'rxjs';
import { HttpObserveType, HttpEventType } from '@opra/client';

client.post('upload', file)
  .options({ reportProgress: true })
  .observe(HttpObserveType.Events)
  .pipe(filter(e => e.type === HttpEventType.UploadProgress))
  .subscribe(e => console.log(`${e.loaded} / ${e.total ?? '?'} bytes`));

See also​