Ajax Client

Observable based HTTP client on top of rxjs/ajax for browser and node.js.

Table of contents

• Ajax Client
  • Table of contents
  • Installation
  • Dependencies
  • API
    • Config
    • Get/Delete
      • Get example
    • Post/Put/Patch
      • Post example
    • Request
      • Request example
    • Interceptors
      • Request interceptor
      • Response interceptor
  • TypeScript
  • Building/Testing
  • Contributing
  • License

Installation

npm i --save @commite/ajax-client rxjs

Dependencies

"rxjs": "^6.3.3"

API

Ajax client uses rxjs/ajax API to perform calls and returns rxjs/observable.

All request accepts an Ajax request options, post, put and patch requests body param can also be typed, other way any type will be assumed.

All request returns an Ajax response, response param can also be typed, other way any type will be assumed.

Config

A base url can be setted using library constructor.

const ajaxClient = new AjaxClient({
  baseUrl: 'my-base-url.com'
});

Equivalent to adding an interceptor like:

interceptors.request.push(request => ({
  ...request,
  url: `${baseUrl}${request.url}`
}));

Get/Delete

[get|delete]<T>(url: string, options?: Partial<AjaxClientRequest<null>>): Observable<AjaxClientResponse<T>>

Get example

const ajaxClient = new AjaxClient();

ajaxClient.get<GetUsersResponse>('/users', { headers: ... }).subscribe((userRes) => {
  [...]
});

Back to top

Post/Put/Patch

[post|put|patch]<T, Y>(url: string, body: Y, options?: Partial<AjaxClientRequest<Y>): Observable<AjaxClientResponse<T>>

Post example

const ajaxClient = new AjaxClient();

ajaxClient.post<PostUserResponse, PostUserBody>('/users', { email: '[email protected]'}, { headers: ... }).subscribe((userRes) => {
  [...]
});

Back to top

Request

request<T, Y>(options: Partial<AjaxClientRequest<Y>>): Observable<AjaxClientResponse<T>>

Request example

ajaxClient.request<RequestResponse, RequestBody>({
  method: 'POST',
  body: {...},
  headers: {...}
}).subscribe((reqRes) => {
  [...]
})

Back to top

Interceptors

Request and response could be intercepted.

Request interceptor

A request interceptor is a function that accepts a Partial<AjaxClientRequest<any>> object and returns a modified (or not) Partial<AjaxClientRequest<any>>.

RequestInterceptor = (
  options: Partial<AjaxRequest<any>>
) => Partial<AjaxRequest<any>>

Request interceptors can be managed through ajaxClient.interceptors.request array.

ajaxClient.interceptors.request.push(options => {
  return {
    ...options,
    url: `https://my-base-url.com/${options.url}`
  };
});

Response interceptor

A response interceptor is a function that accepts a AjaxClientResponse<any> object and returns a modified (or not) AjaxClientResponse<any>.

ResponseInterceptor = (response: AjaxClientResponse<any>) => AjaxClientResponse<any>;

Response interceptors can be managed through ajaxClient.interceptors.response array.

ajaxClient.interceptors.response.push(ajaxResponse => {
  return {
    ...ajaxResponse,
    response: ajaxResponse.response.split(',')
  };
});

Back to top

TypeScript

Ajax client is coded entirely in TypeScript with target:'es5'.

Building/Testing

• npm install
• npm run build
• npm run lint
• npm run test or npm run test:watch

Contributing

• Maintaining 100% unit tests coverage and lintering.
• Gitflow
• Commit convention
• Semver

License

Copyright (c) 2018 Commite Inc under LGPLv3 license.