Ajax requests

Many functions in the framework make requests. For example some components get their template from the file. The framework uses a special service for ajax requests, Akili.services.request It is an extended instance of Request class.

import request, { Request } from 'akili/src/services/request';
console.log(request === Akili.services.request); // true
console.log(request instanceof Request); // true

Request.prototype.constructor(baseUrl, defaultOptions)

  • [baseUrl=""] string - initial part of the URL for any request
  • [defaultOptions] object - default options for each request

Request.prototype.query(url, options) Promise

  • url string - URL
  • [options] Object - request options
request.query({
  method: 'GET',
  url: '/templates/cat.html'
}).then((res) => {
  console.log(res.data) // response data
  console.log(res.status) // status code
}).catch((err) => {
  throw err;
})

Full URL request will be request.baseUrl + options.url => /templates/cat.html. The default method for query is GET.

As previously stated request object is instance of Request, but has some own methods.

request.addInstance(name, instance)

  • name string - name of the instance
  • instance Request - the instance

request.removeInstance(name)

  • name string - name of the instance
request.addInstance('api', new Request('/api/', {
  responseType: 'json'
}));

request.use.api.query({
  url: '/users/'
});

Full URL request will be /api/templates/cat.html, request options will be include responseType = 'json'. So you can save and get any request instance you need to make request.

request.addInstance('api', new Request('/api/v1/'));
request.addInstance('apiV2', new Request('/api/v2/'));

request.use.api.query({ url: '/users/'});
request.use.apiV2.query({ url: '/users/'});
request.query({ url: '/dog.html'});

Cache

To activate the cache, pass cache option with the time in milliseconds to Request class constructor.

request.addInstance('api', new Request('api/', { cache: 1000 }));

Of course you can pass cache option for a specific request.

request.use.api.get('user/1', { 
  cache: 1200 
});

request.use.api.get('user/1', { 
  cache: false 
});

To enable the cache for the main request instance you can use request.defaults.

request.defaults.cache = options => options.url.match(/\.html$/i)? 5000: false;

Query options

  • url - URL (xhr)
  • method - method (xhr)
  • body - body (xhr)
  • withCredentials - control CORS (xhr)
  • responseType - response type (xhr)
  • timeout - timeout (xhr)
  • onStart - function which will be called before the request
  • onProgress - function which will be called on xhr.onprocess
  • headers - object with http headers
  • json - object to send json
  • form - object to send multipart form
  • params - object with query params
  • cache - time in milliseconds to cache GET requests
  • statusErrorsPattern - pattern to throw error by response status
request.query({
  onStart: (xhr) => {
    // do something
  }
});
request.query({
  onProgress: (xhr) => {
    // do something
  }
});
request.query({
  headers: {
    'content-type': 'application/json'
  }
});
request.query({
  json: {
    name: 'Hugo',
    age: '27'
  }
});
request.query({
  form: {
    name: 'Hugo',
    avatar: new File(...)
  }
});
request.query({
  url: '/find/'
  params: {
    lon: 27,
    lat: 27
  }
});

// => '/find/?lon=27&lat=27';
request.query({
  statusErrorPattern: /^[^23]/
}).catch(() => {
  // if /^[^23]/.test(err.response.status) === true
});

Request.prototype.get(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.post(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.put(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.delete(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.patch(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.head(url, options) Promise

  • url string - URL
  • [options] Object - request options

Request.prototype.transformBefore(xhr, options) { xhr, options }

  • xhr XMLHttpRequest - request instance
  • options Object - request options

Request.prototype.transformAfter(result) object

  • result object - response result