Package Exports

@lion/ajax

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lion/ajax) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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