Go to rebrand


APIClient is a class that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

How to use

APIClient needs to be imported in your project as well as APIClientModel.

import APIClient from './api-client.es6'; import APIClientModel from './api-client-model.es6';

APIClient has the fetch method that get request attributes that are used to generate an HTTP request from APIClientModel and returns a promise that is resolved (request success) or rejected (request failure) with a response object.

Model settings:

const model = new APIClientModel(); model.setUrl('myapi.com'); model.setMethod('POST'); model.setData({title: 'foo', body: 'bar'});

Model needs to be passed as an argument to the APIClient instance:

const apiClient = new APIClient(model);

Using the fetch method:

apiClient.fetch().then((response) => { console.log('Contents: ' + response); }).catch((error) => { console.error('Something went wrong', error); });

APIClientModel methods:

  • setUrl: Sets the url used to make the request
  • setMethod: Sets the HTTP method url used to make the request
  • setData: Sets the data object that will be send in the request
  • setContentType: Sets the content type that will be set on the request header
  • getUrl: Returns the url attribute
  • getMethod: Returns method attribute
  • getData: Returns data attribute
  • getContentType: Returns contentType attribute
  • getCsrfToken: Returns usage flag (False as default)


Make sure that you have CORS enabled.

How to use CSRF Token

  • Set the prop csrfToken of your APIClientModel as true
  • You must have a valid CSRF cookie in your document.cookie. (e.g. csrftoken)
  • The name of the cookie must be exposed as global:
window.CSRF_COOKIE_NAME = 'csrftoken';

If you don't have a valid cokie settled in your document.cookie, your request won't have the "X-CSRFToken" set in the header.

Set generic headers

We have the ability to set generic headers for the API Client script, to do so we can define them like:

window.APIClient = { headers: [ { key: 'key name', value: 'value for the header' }, { key: 'key name 2', value: 'value for second header' } ] }