Handling AJAX Requests with `Liferay.Util.fetch`

When you make Ajax requests (referred to as Service Resource actions/requests in Liferay DXP), they must protect against CSRF and include the proper credentials. Since Liferay DXP 7.2 SP1 and Liferay CE Portal 7.2 GA2, Liferay DXP provides a Liferay.Util.fetch utility based on the standard fetch API that you can use to make AJAX requests. It includes these key features:

  • A thin wrapper on ES6 fetch that shares the same API
  • Sets credentials:include to each request
  • Sets x-csrf-token header to each request
  • Requires no dependencies

Below is an example configuration in ES6:

import {fetch} from 'frontend-js-web';

fetch(url, {
  body: new FormData(form),
  method: 'POST'
})
  .then(response => response.json())
  .then(response => processData(response))
  .then(response => failureCallback(error));

Example use case in JSPs:

Liferay.Util.fetch(url, {
  body: new FormData(form),
  method: 'POST'
}).then(function(response) {
  return response.json();
}).then(function(response) {
  message.innerHTML = response.message;
}).catch(function() {
  failureCallback();
});
« Invoking Liferay ServicesWorking with Addresses »
Was this article helpful?
0 out of 4 found this helpful