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, defaultsOptions)

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

Create new request instance.

Request.prototype.query(url, options) Promise

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

The base method to make request.

request.query({
  method: 'GET',
  url: '/templates/cat.html'
}).then((res) => {
  console.log(res.xhr) // xhr object
  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

Add new instance to request for managing.

request.removeInstance(name)

  • name string - name of the instance

Remove a request 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'});

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
  • 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({
  statusErrorsPattern: /^([^23])|404/
}).catch(() => {
  // if /^([^23])|404/.test(err.response.status) === true
});

Request.prototype.get(url, options) Promise

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

GET request.

Request.prototype.post(url, options) Promise

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

POST request.

Request.prototype.put(url, options) Promise

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

PUT request.

Request.prototype.delete(url, options) Promise

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

DELETE request.

Request.prototype.patch(url, options) Promise

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

PATCH request.

Request.prototype.transformBefore(options) object

  • options Object - request options

Transform options before the request.

Request.prototype.transformAfter(xhr) object

  • xhr XMLHttpRequest - xhr instance

Transform response result to get it in the promise "then".