ajax

Ajax

ajax is the global manager for handling all ajax requests. It is a promise based system for fetching data, based on axios

Features

• only JS functions, no (unnecessarily expensive) web components
• supports GET, POST, PUT, DELETE, REQUEST, PATCH and HEAD methods
• can be used with or without XSRF token

How to use

Installation

npm i --save @lion/ajax

Example

import { ajax } from '@lion/ajax';

ajax.get('data.json')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Create own instances for custom options

Cancel

import { AjaxClass } from '@lion/ajax';

const myAjax = AjaxClass.getNewInstance({ cancelable: true });
myAjax.get('data.json')
  .then((response) => {
    document.querySelector('#canceled').innerHTML = JSON.stringify(response.data);
  })
  .catch((error) => {
    document.querySelector('#canceled').innerHTML = `I got cancelled: ${error.message}`;
  });
setTimeout(() => {
  myAjax.cancel('too slow');
}, 1);

Cancel previous on new request

import { AjaxClass } from '@lion/ajax'

const myAjax = AjaxClass.getNewInstance({ cancelPreviousOnNewRequest: true });
myAjax.get('data.json')
  .then((response) => {
    document.querySelector('#request1').innerHTML = 'Request 1: ' + JSON.stringify(response.data);
  })
  .catch((error) => {
    document.querySelector('#request1').innerHTML = `Request 1: I got cancelled: ${error.message}`;
  });
myAjax.get('data2.json')
  .then((response) => {
    document.querySelector('#request2').innerHTML = 'Request 2: ' + JSON.stringify(response.data);
  })
  .catch((error) => {
    document.querySelector('#request2').innerHTML = `Request 2: I got cancelled: ${error.message}`;
  });

Considerations

Due to a bug in axios options may leak in to other instances. So please avoid setting global options in axios. Interceptors have no issues.

Future plans

• Endplan is to remove axios and replace it with fetch
• This wrapper exist so that this switch should not mean any breaking changes for our users