http

@mvuijs/core / http

http #

Const object

{
    delete: <ResponseT>(path: string, options?: RequestOptions<true>) => Stream<{
        body: ResponseT;
        detail: Response;
    }>(path: string, options?: RequestOptions<false>) => Stream<{
        body: string;
        detail: Response;
    }>;
    get: <ResponseT>(path: string, options?: RequestOptions<true>) => Stream<{
        body: ResponseT;
        detail: Response;
    }>(path: string, options?: RequestOptions<false>) => Stream<{
        body: string;
        detail: Response;
    }>;
    patch: <ResponseT>(path: string, options?: RequestOptions<true>) => Stream<{
        body: ResponseT;
        detail: Response;
    }>(path: string, options?: RequestOptions<false>) => Stream<{
        body: string;
        detail: Response;
    }>;
    post: <ResponseT>(path: string, options?: RequestOptions<true>) => Stream<{
        body: ResponseT;
        detail: Response;
    }>(path: string, options?: RequestOptions<false>) => Stream<{
        body: string;
        detail: Response;
    }>;
    put: <ResponseT>(path: string, options?: RequestOptions<true>) => Stream<{
        body: ResponseT;
        detail: Response;
    }>(path: string, options?: RequestOptions<false>) => Stream<{
        body: string;
        detail: Response;
    }>;
}

A simple HTTP client. When compared to a bare fetch, there are three main things added/changed:

  1. It returns a Stream . This enables the easier use of higher order operators like switchMap .
  2. There is some basic convenience around parsing a json body and setting request path parameters.
  3. Instead of just silently failing and setting an ok value to false like fetch does, an HttpError object is thrown in the Stream.

Basic Example # 

http.get<{ someJsonBodyField: number }>(
  '/some-path', { pathParams: { id: 4 }}
).subscribe(resp => console.log(resp.body);

// provided that the /some-path endpoint exists and the types are correct,
// this will print { someJsonbodyfield: <someNumber> }

Example with switchMap # 

// imagine this in a template
rx.fromEvent(myInput, 'change').pipe(
  rx.debounceTime(100),
  rx.map(v => (v.target as any).value as string),
  rx.switchMap(v => http.get('/search', { pathParams: { name: v })),
).subscribe(resp = console.log(resp.body));

// provided that the /search endpoint exists and the types are correct,
// this will print log the api response for each new input value

Note that this example will cancel unfinished requests and ensure that the emitted response always maps to the most current input value. For more information on this behaviour, have a look at the switchMap operator.

Type declaration #

Member Type
delete <ResponseT>(path: string, options?: RequestOptions <true>) => Stream <{ body: ResponseT; detail: Response; }>(path: string, options?: RequestOptions <false>) => Stream <{ body: string; detail: Response; }>
get <ResponseT>(path: string, options?: RequestOptions <true>) => Stream <{ body: ResponseT; detail: Response; }>(path: string, options?: RequestOptions <false>) => Stream <{ body: string; detail: Response; }>
patch <ResponseT>(path: string, options?: RequestOptions <true>) => Stream <{ body: ResponseT; detail: Response; }>(path: string, options?: RequestOptions <false>) => Stream <{ body: string; detail: Response; }>
post <ResponseT>(path: string, options?: RequestOptions <true>) => Stream <{ body: ResponseT; detail: Response; }>(path: string, options?: RequestOptions <false>) => Stream <{ body: string; detail: Response; }>
put <ResponseT>(path: string, options?: RequestOptions <true>) => Stream <{ body: ResponseT; detail: Response; }>(path: string, options?: RequestOptions <false>) => Stream <{ body: string; detail: Response; }>

Defined in: packages/core/src/http.ts:46