@lion/ajax

Ajax

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

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