From 73d4e222f6113333c2aea9f5c5757469f35f7c83 Mon Sep 17 00:00:00 2001
From: Goffert van Gool <ruphin@ruphin.net>
Date: Wed, 12 May 2021 15:21:18 +0200
Subject: [PATCH] Update public API of ajax & refactor package (#1371)

feat(ajax): align / break public API

Co-authored-by: Ahmet Yesil <yesil.ahmet@ing.com>
---
 .changeset/rude-frogs-run.md                  |  13 +
 docs/docs/tools/ajax/features.md              |  99 ++--
 docs/docs/tools/ajax/overview.md              |  20 +-
 packages/ajax/index.js                        |  19 +-
 packages/ajax/src/{AjaxClient.js => Ajax.js}  |  39 +-
 ...xClientFetchError.js => AjaxFetchError.js} |   2 +-
 packages/ajax/src/ajax.js                     |  14 -
 .../src/{interceptors-cache.js => cache.js}   | 134 +----
 .../src/interceptors/acceptLanguageHeader.js  |  16 +
 .../src/interceptors/cacheInterceptors.js     | 137 +++++
 packages/ajax/src/interceptors/index.js       |   3 +
 .../xsrfHeader.js}                            |  19 +-
 packages/ajax/src/typedef.js                  |   2 +-
 .../test/{AjaxClient.test.js => Ajax.test.js} |  82 +--
 packages/ajax/test/ajax.test.js               |  14 -
 packages/ajax/test/index.test.js              |  35 ++
 packages/ajax/test/interceptors-cache.test.js | 521 -----------------
 packages/ajax/test/interceptors.test.js       | 542 +++++++++++++++++-
 packages/ajax/types/types.d.ts                |   6 +-
 19 files changed, 885 insertions(+), 832 deletions(-)
 create mode 100644 .changeset/rude-frogs-run.md
 rename packages/ajax/src/{AjaxClient.js => Ajax.js} (85%)
 rename packages/ajax/src/{AjaxClientFetchError.js => AjaxFetchError.js} (81%)
 delete mode 100644 packages/ajax/src/ajax.js
 rename packages/ajax/src/{interceptors-cache.js => cache.js} (55%)
 create mode 100644 packages/ajax/src/interceptors/acceptLanguageHeader.js
 create mode 100644 packages/ajax/src/interceptors/cacheInterceptors.js
 create mode 100644 packages/ajax/src/interceptors/index.js
 rename packages/ajax/src/{interceptors.js => interceptors/xsrfHeader.js} (60%)
 rename packages/ajax/test/{AjaxClient.test.js => Ajax.test.js} (81%)
 delete mode 100644 packages/ajax/test/ajax.test.js
 create mode 100644 packages/ajax/test/index.test.js
 delete mode 100644 packages/ajax/test/interceptors-cache.test.js

diff --git a/.changeset/rude-frogs-run.md b/.changeset/rude-frogs-run.md
new file mode 100644
index 000000000..bb0a6dc6d
--- /dev/null
+++ b/.changeset/rude-frogs-run.md
@@ -0,0 +1,13 @@
+---
+'@lion/ajax': minor
+---
+
+**BREAKING** public API changes:
+
+- `AjaxClient` is now `Ajax`
+- `AjaxClientFetchError` is now `AjaxFetchError`
+- `request` and `requestJson` methods of `Ajax` class are renamed as `fetch` and `fetchJson` respectively
+- `getCookie` and `validateOptions` is not part of the public API any more
+- Removed the `setAjax`
+- `createXSRFRequestInterceptor` renamed as `createXsrfRequestInterceptor`
+- Exporting `createCacheInterceptors` instead of `cacheRequestInterceptorFactory` and `cacheResponseInterceptorFactory`
diff --git a/docs/docs/tools/ajax/features.md b/docs/docs/tools/ajax/features.md
index 4e3a81364..efac229c6 100644
--- a/docs/docs/tools/ajax/features.md
+++ b/docs/docs/tools/ajax/features.md
@@ -3,12 +3,7 @@
 ```js script
 import { html } from '@lion/core';
 import { renderLitAsNode } from '@lion/helpers';
-import {
-  ajax,
-  AjaxClient,
-  cacheRequestInterceptorFactory,
-  cacheResponseInterceptorFactory,
-} from '@lion/ajax';
+import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';
 
 const getCacheIdentifier = () => {
@@ -25,8 +20,13 @@ const cacheOptions = {
   timeToLive: 1000 * 60 * 10, // 10 minutes
 };
 
-ajax.addRequestInterceptor(cacheRequestInterceptorFactory(getCacheIdentifier, cacheOptions));
-ajax.addResponseInterceptor(cacheResponseInterceptorFactory(getCacheIdentifier, cacheOptions));
+const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+  getCacheIdentifier,
+  cacheOptions,
+);
+
+ajax.addRequestInterceptor(cacheRequestInterceptor);
+ajax.addResponseInterceptor(cacheResponseInterceptor);
 ```
 
 ## GET request
@@ -34,14 +34,16 @@ ajax.addResponseInterceptor(cacheResponseInterceptorFactory(getCacheIdentifier,
 ```js preview-story
 export const getRequest = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = name => {
     ajax
-      .request(`../assets/${name}.json`)
+      .fetch(`../assets/${name}.json`)
       .then(response => response.json())
       .then(result => {
         actionLogger.log(JSON.stringify(result, null, 2));
       });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -60,16 +62,17 @@ export const getRequest = () => {
 ```js
 import { ajax } from '@lion/ajax';
 
-const response = await ajax.request('/api/users', {
+const response = await ajax.fetch('/api/users', {
   method: 'POST',
   body: JSON.stringify({ username: 'steve' }),
 });
+
 const newUser = await response.json();
 ```
 
 ### JSON requests
 
-We usually deal with JSON requests and responses. With `requestJson` you don't need to specifically stringify the request body or parse the response body.
+We usually deal with JSON requests and responses. With `fetchJson` you don't need to specifically stringify the request body or parse the response body.
 
 The result will have the Response object on `.response` property, and the decoded json will be available on `.body`.
 
@@ -78,12 +81,14 @@ The result will have the Response object on `.response` property, and the decode
 ```js preview-story
 export const getJsonRequest = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = name => {
-    ajax.requestJson(`../assets/${name}.json`).then(result => {
+    ajax.fetchJson(`../assets/${name}.json`).then(result => {
       console.log(result.response);
       actionLogger.log(JSON.stringify(result.body, null, 2));
     });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -102,7 +107,7 @@ export const getJsonRequest = () => {
 ```js
 import { ajax } from '@lion/ajax';
 
-const { response, body } = await ajax.requestJson('/api/users', {
+const { response, body } = await ajax.fetchJson('/api/users', {
   method: 'POST',
   body: { username: 'steve' },
 });
@@ -110,14 +115,15 @@ const { response, body } = await ajax.requestJson('/api/users', {
 
 ### Error handling
 
-Different from fetch, `ajax` throws when the server returns a 4xx or 5xx, returning the request and response:
+Different from fetch, `Ajax` throws when the server returns a 4xx or 5xx, returning the request and response:
 
 ```js preview-story
 export const errorHandling = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = async () => {
     try {
-      const users = await ajax.requestJson('/api/users');
+      const users = await ajax.fetchJson('/api/users');
     } catch (error) {
       if (error.response) {
         if (error.response.status === 400) {
@@ -126,11 +132,13 @@ export const errorHandling = () => {
           actionLogger.log(error);
         }
       } else {
-        // an error happened before receiving a response, ex. an incorrect request or network error
+        // an error happened before receiving a response,
+        // ex. an incorrect request or network error
         actionLogger.log(error);
       }
     }
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -163,43 +171,41 @@ requested response, based on the options that are being passed.
 
 ### Getting started
 
-Consume the global `ajax` instance and add the interceptors to it, using a cache configuration
-which is applied on application level. If a developer wants to add specifics to cache behavior
-they have to provide a cache config per action (`get`, `post`, etc.) via `cacheOptions` field of local ajax config,
+Consume the global `ajax` instance and add interceptors to it, using a cache configuration which is applied on application level. If a developer wants to add specifics to cache behaviour they have to provide a cache config per action (`get`, `post`, etc.) via `cacheOptions` field of local ajax config,
 see examples below.
 
 > **Note**: make sure to add the **interceptors** only **once**. This is usually
 > done on app-level
 
 ```js
-import {
-  ajax,
-  cacheRequestInterceptorFactory,
-  cacheResponseInterceptorFactory,
-} from '@lion-web/ajax.js';
+import { ajax, createCacheInterceptors } from '@lion-web/ajax';
 
 const globalCacheOptions = {
   useCache: true,
   timeToLive: 1000 * 60 * 5, // 5 minutes
 };
+
 // Cache is removed each time an identifier changes,
 // for instance when a current user is logged out
 const getCacheIdentifier = () => getActiveProfile().profileId;
 
-ajax.addRequestInterceptor(cacheRequestInterceptorFactory(getCacheIdentifier, globalCacheOptions));
-ajax.addResponseInterceptor(
-  cacheResponseInterceptorFactory(getCacheIdentifier, globalCacheOptions),
+const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+  getCacheIdentifier,
+  globalCacheOptions,
 );
 
-const { response, body } = await ajax.requestJson('/my-url');
+ajax.addRequestInterceptor(cacheRequestInterceptor);
+ajax.addResponseInterceptor(cacheResponseInterceptor);
+
+const { response, body } = await ajax.fetchJson('/my-url');
 ```
 
-Alternatively, most often for subclassers, you can extend or import `AjaxClient` yourself, and pass cacheOptions when instantiating the ajax singleton.
+Alternatively, most often for sub-classers, you can extend or import `Ajax` yourself, and pass cacheOptions when instantiating the ajax.
 
 ```js
-import { AjaxClient } from '@lion/ajax';
+import { Ajax } from '@lion/ajax';
 
-export const ajax = new AjaxClient({
+export const ajax = new Ajax({
   cacheOptions: {
     useCache: true,
     timeToLive: 1000 * 60 * 5, // 5 minutes
@@ -218,12 +224,14 @@ which is either undefined for normal requests, or set to true for responses that
 ```js preview-story
 export const cache = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = name => {
-    ajax.requestJson(`../assets/${name}.json`).then(result => {
+    ajax.fetchJson(`../assets/${name}.json`).then(result => {
       actionLogger.log(`From cache: ${result.response.fromCache || false}`);
       actionLogger.log(JSON.stringify(result.body, null, 2));
     });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -244,6 +252,7 @@ In this demo, when we fetch naga, we always pass `useCache: false` so the Respon
 ```js preview-story
 export const cacheActionOptions = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = name => {
     let actionCacheOptions;
     if (name === 'naga') {
@@ -252,13 +261,12 @@ export const cacheActionOptions = () => {
       };
     }
 
-    ajax
-      .requestJson(`../assets/${name}.json`, { cacheOptions: actionCacheOptions })
-      .then(result => {
-        actionLogger.log(`From cache: ${result.response.fromCache || false}`);
-        actionLogger.log(JSON.stringify(result.body, null, 2));
-      });
+    ajax.fetchJson(`../assets/${name}.json`, { cacheOptions: actionCacheOptions }).then(result => {
+      actionLogger.log(`From cache: ${result.response.fromCache || false}`);
+      actionLogger.log(JSON.stringify(result.body, null, 2));
+    });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -292,9 +300,10 @@ After TTL expires, the next request will set the cache again, and for the next 3
 ```js preview-story
 export const cacheTimeToLive = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = () => {
     ajax
-      .requestJson(`../assets/pabu.json`, {
+      .fetchJson(`../assets/pabu.json`, {
         cacheOptions: {
           timeToLive: 1000 * 3, // 3 seconds
         },
@@ -304,6 +313,7 @@ export const cacheTimeToLive = () => {
         actionLogger.log(JSON.stringify(result.body, null, 2));
       });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -325,8 +335,9 @@ Now we will allow you to change this identifier to invalidate the cache.
 ```js preview-story
 export const changeCacheIdentifier = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = () => {
-    ajax.requestJson(`../assets/pabu.json`).then(result => {
+    ajax.fetchJson(`../assets/pabu.json`).then(result => {
       actionLogger.log(`From cache: ${result.response.fromCache || false}`);
       actionLogger.log(JSON.stringify(result.body, null, 2));
     });
@@ -366,12 +377,14 @@ Therefore, we invalidate the cache, so the user gets the latest state from the d
 ```js preview-story
 export const nonGETRequest = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = (name, method) => {
-    ajax.requestJson(`../assets/${name}.json`, { method }).then(result => {
+    ajax.fetchJson(`../assets/${name}.json`, { method }).then(result => {
       actionLogger.log(`From cache: ${result.response.fromCache || false}`);
       actionLogger.log(JSON.stringify(result.body, null, 2));
     });
   };
+
   return html`
     <style>
       sb-action-logger {
@@ -408,6 +421,7 @@ In this demo, invalidating the `pabu` endpoint will invalidate `naga`, but not t
 ```js preview-story
 export const invalidateRules = () => {
   const actionLogger = renderLitAsNode(html`<sb-action-logger></sb-action-logger>`);
+
   const fetchHandler = (name, method) => {
     const actionCacheOptions = {};
     if (name === 'pabu') {
@@ -415,7 +429,7 @@ export const invalidateRules = () => {
     }
 
     ajax
-      .requestJson(`../assets/${name}.json`, {
+      .fetchJson(`../assets/${name}.json`, {
         method,
         cacheOptions: actionCacheOptions,
       })
@@ -424,6 +438,7 @@ export const invalidateRules = () => {
         actionLogger.log(JSON.stringify(result.body, null, 2));
       });
   };
+
   return html`
     <style>
       sb-action-logger {
diff --git a/docs/docs/tools/ajax/overview.md b/docs/docs/tools/ajax/overview.md
index 29980f5f5..dda39dbb0 100644
--- a/docs/docs/tools/ajax/overview.md
+++ b/docs/docs/tools/ajax/overview.md
@@ -3,12 +3,7 @@
 ```js script
 import { html } from '@lion/core';
 import { renderLitAsNode } from '@lion/helpers';
-import {
-  ajax,
-  AjaxClient,
-  cacheRequestInterceptorFactory,
-  cacheResponseInterceptorFactory,
-} from '@lion/ajax';
+import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';
 
 const getCacheIdentifier = () => {
@@ -25,11 +20,16 @@ const cacheOptions = {
   timeToLive: 1000 * 60 * 10, // 10 minutes
 };
 
-ajax.addRequestInterceptor(cacheRequestInterceptorFactory(getCacheIdentifier, cacheOptions));
-ajax.addResponseInterceptor(cacheResponseInterceptorFactory(getCacheIdentifier, cacheOptions));
+const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+  getCacheIdentifier,
+  cacheOptions,
+);
+
+ajax.addRequestInterceptor(cacheRequestInterceptor);
+ajax.addResponseInterceptor(cacheResponseInterceptor);
 ```
 
-`ajax` is a small wrapper around `fetch` which:
+`Ajax` is a small wrapper around `fetch` which:
 
 - Allows globally registering request and response interceptors
 - Throws on 4xx and 5xx status codes
@@ -46,4 +46,4 @@ npm i --save @lion/ajax
 
 ### Relation to fetch
 
-`ajax` delegates all requests to fetch. `ajax.request` and `ajax.requestJson` have the same function signature as `window.fetch`, you can use any online resource to learn more about fetch. [MDN](http://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) is a great start.
+`Ajax` delegates all requests to fetch. `ajax.fetch` and `ajax.fetchJson` have the same function signature as `window.fetch`, you can use any online resource to learn more about fetch. [MDN](http://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) is a great start.
diff --git a/packages/ajax/index.js b/packages/ajax/index.js
index eb9a60ab9..26539bf3f 100644
--- a/packages/ajax/index.js
+++ b/packages/ajax/index.js
@@ -1,15 +1,12 @@
-export { ajax, setAjax } from './src/ajax.js';
-export { AjaxClient } from './src/AjaxClient.js';
-export { AjaxClientFetchError } from './src/AjaxClientFetchError.js';
+import { Ajax } from './src/Ajax.js';
 
+export { Ajax } from './src/Ajax.js';
+export { AjaxFetchError } from './src/AjaxFetchError.js';
 export {
   acceptLanguageRequestInterceptor,
-  createXSRFRequestInterceptor,
-  getCookie,
-} from './src/interceptors.js';
+  createXsrfRequestInterceptor,
+  createCacheInterceptors,
+} from './src/interceptors/index.js';
 
-export {
-  cacheRequestInterceptorFactory,
-  cacheResponseInterceptorFactory,
-  validateOptions,
-} from './src/interceptors-cache.js';
+// globally available instance
+export const ajax = new Ajax();
diff --git a/packages/ajax/src/AjaxClient.js b/packages/ajax/src/Ajax.js
similarity index 85%
rename from packages/ajax/src/AjaxClient.js
rename to packages/ajax/src/Ajax.js
index 0c2481cd7..ea4cf19cc 100644
--- a/packages/ajax/src/AjaxClient.js
+++ b/packages/ajax/src/Ajax.js
@@ -1,11 +1,10 @@
 /* eslint-disable consistent-return */
 import {
-  cacheRequestInterceptorFactory,
-  cacheResponseInterceptorFactory,
-} from './interceptors-cache.js';
-import { acceptLanguageRequestInterceptor, createXSRFRequestInterceptor } from './interceptors.js';
-import { AjaxClientFetchError } from './AjaxClientFetchError.js';
-
+  acceptLanguageRequestInterceptor,
+  createXsrfRequestInterceptor,
+  createCacheInterceptors,
+} from './interceptors/index.js';
+import { AjaxFetchError } from './AjaxFetchError.js';
 import './typedef.js';
 
 /**
@@ -13,13 +12,13 @@ import './typedef.js';
  * intercept request and responses, for example to add authorization headers or logging. A
  * request can also be prevented from reaching the network at all by returning the Response directly.
  */
-export class AjaxClient {
+export class Ajax {
   /**
-   * @param {Partial<AjaxClientConfig>} config
+   * @param {Partial<AjaxConfig>} config
    */
   constructor(config = {}) {
     /**
-     * @type {Partial<AjaxClientConfig>}
+     * @type {Partial<AjaxConfig>}
      * @private
      */
     this.__config = {
@@ -45,23 +44,23 @@ export class AjaxClient {
 
     const { xsrfCookieName, xsrfHeaderName } = this.__config;
     if (xsrfCookieName && xsrfHeaderName) {
-      this.addRequestInterceptor(createXSRFRequestInterceptor(xsrfCookieName, xsrfHeaderName));
+      this.addRequestInterceptor(createXsrfRequestInterceptor(xsrfCookieName, xsrfHeaderName));
     }
 
     const { cacheOptions } = this.__config;
     if (cacheOptions?.useCache) {
-      this.addRequestInterceptor(
-        cacheRequestInterceptorFactory(cacheOptions.getCacheIdentifier, cacheOptions),
-      );
-      this.addResponseInterceptor(
-        cacheResponseInterceptorFactory(cacheOptions.getCacheIdentifier, cacheOptions),
+      const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+        cacheOptions.getCacheIdentifier,
+        cacheOptions,
       );
+      this.addRequestInterceptor(/** @type {RequestInterceptor} */ (cacheRequestInterceptor));
+      this.addResponseInterceptor(/** @type {ResponseInterceptor} */ (cacheResponseInterceptor));
     }
   }
 
   /**
    * Sets the config for the instance
-   * @param {Partial<AjaxClientConfig>} config configuration for the AjaxClass instance
+   * @param {Partial<AjaxConfig>} config configuration for the AjaxClass instance
    */
   set options(config) {
     this.__config = config;
@@ -103,7 +102,7 @@ export class AjaxClient {
    * @param {RequestInit & Partial<CacheRequestExtension>} [init]
    * @returns {Promise<Response>}
    */
-  async request(info, init) {
+  async fetch(info, init) {
     const request = /** @type {CacheRequest} */ (new Request(info, { ...init }));
     request.cacheOptions = init?.cacheOptions;
     request.params = init?.params;
@@ -121,7 +120,7 @@ export class AjaxClient {
     const interceptedResponse = await this.__interceptResponse(response);
 
     if (interceptedResponse.status >= 400 && interceptedResponse.status < 600) {
-      throw new AjaxClientFetchError(request, interceptedResponse);
+      throw new AjaxFetchError(request, interceptedResponse);
     }
     return interceptedResponse;
   }
@@ -135,7 +134,7 @@ export class AjaxClient {
    * @template T
    * @returns {Promise<{ response: Response, body: T }>}
    */
-  async requestJson(info, init) {
+  async fetchJson(info, init) {
     const lionInit = {
       ...init,
       headers: {
@@ -152,7 +151,7 @@ export class AjaxClient {
 
     // Now that we stringified lionInit.body, we can safely typecast LionRequestInit back to RequestInit
     const jsonInit = /** @type {RequestInit} */ (lionInit);
-    const response = await this.request(info, jsonInit);
+    const response = await this.fetch(info, jsonInit);
     let responseText = await response.text();
 
     const { jsonPrefix } = this.__config;
diff --git a/packages/ajax/src/AjaxClientFetchError.js b/packages/ajax/src/AjaxFetchError.js
similarity index 81%
rename from packages/ajax/src/AjaxClientFetchError.js
rename to packages/ajax/src/AjaxFetchError.js
index bc66f31c8..258bfe672 100644
--- a/packages/ajax/src/AjaxClientFetchError.js
+++ b/packages/ajax/src/AjaxFetchError.js
@@ -1,4 +1,4 @@
-export class AjaxClientFetchError extends Error {
+export class AjaxFetchError extends Error {
   /**
    * @param {Request} request
    * @param {Response} response
diff --git a/packages/ajax/src/ajax.js b/packages/ajax/src/ajax.js
deleted file mode 100644
index 288a67d2d..000000000
--- a/packages/ajax/src/ajax.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { AjaxClient } from './AjaxClient.js';
-
-export let ajax = new AjaxClient(); // eslint-disable-line import/no-mutable-exports
-
-/**
- * setAjax allows the Application Developer to override the globally used instance of {@link:ajax}.
- * All interactions with {@link:ajax} after the call to setAjax will use this new instance
- * (so make sure to call this method before dependant code using {@link:ajax} is ran and this
- * method is not called by any of your (indirect) dependencies.)
- * @param {AjaxClient} newAjax the globally used instance of {@link:ajax}.
- */
-export function setAjax(newAjax) {
-  ajax = newAjax;
-}
diff --git a/packages/ajax/src/interceptors-cache.js b/packages/ajax/src/cache.js
similarity index 55%
rename from packages/ajax/src/interceptors-cache.js
rename to packages/ajax/src/cache.js
index ef22268b5..ff046bfcc 100644
--- a/packages/ajax/src/interceptors-cache.js
+++ b/packages/ajax/src/cache.js
@@ -1,6 +1,5 @@
 /* eslint-disable consistent-return */
 /* eslint-disable no-param-reassign */
-
 import './typedef.js';
 
 const SECOND = 1000;
@@ -138,7 +137,7 @@ let caches = {};
  * @param {Params} params query string parameters object
  * @returns {string} of querystring parameters WITHOUT `?` or empty string ''
  */
-export const searchParamSerializer = (params = {}) =>
+export const stringifySearchParams = (params = {}) =>
   typeof params === 'object' && params !== null ? new URLSearchParams(params).toString() : '';
 
 /**
@@ -147,7 +146,7 @@ export const searchParamSerializer = (params = {}) =>
  * and proactively clean it
  * @param {string} cacheIdentifier usually the refreshToken of the owner of the cache
  */
-const getCache = cacheIdentifier => {
+export const getCache = cacheIdentifier => {
   if (caches[cacheIdentifier]?._validateCache()) {
     return caches[cacheIdentifier];
   }
@@ -162,7 +161,7 @@ const getCache = cacheIdentifier => {
  * @param {CacheOptions} options Options to match cache
  * @returns {ValidatedCacheOptions}
  */
-export const validateOptions = ({
+export const validateCacheOptions = ({
   useCache = false,
   methods = ['get'],
   timeToLive,
@@ -204,11 +203,9 @@ export const validateOptions = ({
       throw new Error('Property `requestIdentificationFn` must be of type `function`');
     }
   } else {
-    requestIdentificationFn = /** @param {any} data */ (
-      { url, params },
-      searchParamsSerializer,
-    ) => {
-      const serializedParams = searchParamsSerializer(params);
+    // eslint-disable-next-line no-shadow
+    requestIdentificationFn = /** @param {any} data */ ({ url, params }, stringifySearchParams) => {
+      const serializedParams = stringifySearchParams(params);
       return serializedParams ? `${url}?${serializedParams}` : url;
     };
   }
@@ -222,122 +219,3 @@ export const validateOptions = ({
     requestIdentificationFn,
   };
 };
-
-/**
- * Request interceptor to return relevant cached requests
- * @param {function(): string} getCacheIdentifier used to invalidate cache if identifier is changed
- * @param {CacheOptions} globalCacheOptions
- * @returns {CachedRequestInterceptor}
- */
-export const cacheRequestInterceptorFactory = (getCacheIdentifier, globalCacheOptions) => {
-  const validatedInitialCacheOptions = validateOptions(globalCacheOptions);
-
-  return /** @param {CacheRequest} cacheRequest */ async cacheRequest => {
-    const cacheOptions = validateOptions({
-      ...validatedInitialCacheOptions,
-      ...cacheRequest.cacheOptions,
-    });
-
-    cacheRequest.cacheOptions = cacheOptions;
-
-    // don't use cache if 'useCache' === false
-    if (!cacheOptions.useCache) {
-      return cacheRequest;
-    }
-
-    const cacheId = cacheOptions.requestIdentificationFn(cacheRequest, searchParamSerializer);
-    // cacheIdentifier is used to bind the cache to the current session
-    const currentCache = getCache(getCacheIdentifier());
-    const { method } = cacheRequest;
-
-    // don't use cache if the request method is not part of the configs methods
-    if (!cacheOptions.methods.includes(method.toLowerCase())) {
-      // If it's NOT one of the config.methods, invalidate caches
-      currentCache.delete(cacheId);
-      // also invalidate caches matching to cacheOptions
-      if (cacheOptions.invalidateUrls) {
-        cacheOptions.invalidateUrls.forEach(
-          /** @type {string} */ invalidateUrl => {
-            currentCache.delete(invalidateUrl);
-          },
-        );
-      }
-      // also invalidate caches matching to invalidateUrlsRegex
-      if (cacheOptions.invalidateUrlsRegex) {
-        currentCache.deleteMatched(cacheOptions.invalidateUrlsRegex);
-      }
-
-      return cacheRequest;
-    }
-
-    const pendingRequest = currentCache.getPendingRequest(cacheId);
-    if (pendingRequest) {
-      // there is another concurrent request, wait for it to finish
-      await pendingRequest;
-    }
-
-    const cacheResponse = currentCache.get(cacheId, cacheOptions.timeToLive);
-    if (cacheResponse) {
-      cacheRequest.cacheOptions = cacheRequest.cacheOptions ?? { useCache: false };
-      const response = /** @type {CacheResponse} */ cacheResponse.clone();
-      response.request = cacheRequest;
-      response.fromCache = true;
-      return response;
-    }
-
-    // we do want to use caching for this requesting, but it's not already cached
-    // mark this as a pending request, so that concurrent requests can reuse it from the cache
-    currentCache.setPendingRequest(cacheId);
-
-    return cacheRequest;
-  };
-};
-
-/**
- * Response interceptor to cache relevant requests
- * @param {function(): string} getCacheIdentifier used to invalidate cache if identifier is changed
- * @param {CacheOptions} globalCacheOptions
- * @returns {CachedResponseInterceptor}
- */
-export const cacheResponseInterceptorFactory = (getCacheIdentifier, globalCacheOptions) => {
-  const validatedInitialCacheOptions = validateOptions(globalCacheOptions);
-
-  /**
-   * Axios response https://github.com/axios/axios#response-schema
-   */
-  return /** @param {CacheResponse} cacheResponse */ async cacheResponse => {
-    if (!getCacheIdentifier()) {
-      throw new Error(`getCacheIdentifier returns falsy`);
-    }
-
-    if (!cacheResponse.request) {
-      throw new Error('Missing request in response.');
-    }
-
-    const cacheOptions = validateOptions({
-      ...validatedInitialCacheOptions,
-      ...cacheResponse.request?.cacheOptions,
-    });
-
-    // string that identifies cache entry
-    const cacheId = cacheOptions.requestIdentificationFn(
-      cacheResponse.request,
-      searchParamSerializer,
-    );
-    const currentCache = getCache(getCacheIdentifier());
-    const isAlreadyFromCache = !!cacheResponse.fromCache;
-    // caching all responses with not default `timeToLive`
-    const isCacheActive = cacheOptions.timeToLive > 0;
-    const isMethodSupported = cacheOptions.methods.includes(
-      cacheResponse.request.method.toLowerCase(),
-    );
-    // if the request is one of the options.methods; store response in cache
-    if (!isAlreadyFromCache && isCacheActive && isMethodSupported) {
-      // store the response data in the cache and mark request as resolved
-      currentCache.set(cacheId, cacheResponse.clone());
-    }
-
-    currentCache.resolvePendingRequest(cacheId);
-    return cacheResponse;
-  };
-};
diff --git a/packages/ajax/src/interceptors/acceptLanguageHeader.js b/packages/ajax/src/interceptors/acceptLanguageHeader.js
new file mode 100644
index 000000000..36f09f96b
--- /dev/null
+++ b/packages/ajax/src/interceptors/acceptLanguageHeader.js
@@ -0,0 +1,16 @@
+import '../typedef.js';
+
+/**
+ * Transforms a request, adding an accept-language header with the current application's locale
+ * if it has not already been set.
+ * @type {RequestInterceptor}
+ */
+export async function acceptLanguageRequestInterceptor(request) {
+  if (!request.headers.has('accept-language')) {
+    const documentLocale = document.documentElement.lang;
+    const localizeLang = document.documentElement.getAttribute('data-localize-lang');
+    const locale = localizeLang || documentLocale || 'en';
+    request.headers.set('accept-language', locale);
+  }
+  return request;
+}
diff --git a/packages/ajax/src/interceptors/cacheInterceptors.js b/packages/ajax/src/interceptors/cacheInterceptors.js
new file mode 100644
index 000000000..fa85904ab
--- /dev/null
+++ b/packages/ajax/src/interceptors/cacheInterceptors.js
@@ -0,0 +1,137 @@
+/* eslint-disable no-param-reassign */
+import '../typedef.js';
+import { validateCacheOptions, stringifySearchParams, getCache } from '../cache.js';
+
+/**
+ * Request interceptor to return relevant cached requests
+ * @param {function(): string} getCacheIdentifier used to invalidate cache if identifier is changed
+ * @param {CacheOptions} globalCacheOptions
+ * @returns {RequestInterceptor}
+ */
+const createCacheRequestInterceptor = (getCacheIdentifier, globalCacheOptions) => {
+  const validatedInitialCacheOptions = validateCacheOptions(globalCacheOptions);
+
+  return /** @param {CacheRequest} cacheRequest */ async cacheRequest => {
+    const cacheOptions = validateCacheOptions({
+      ...validatedInitialCacheOptions,
+      ...cacheRequest.cacheOptions,
+    });
+
+    cacheRequest.cacheOptions = cacheOptions;
+
+    // don't use cache if 'useCache' === false
+    if (!cacheOptions.useCache) {
+      return cacheRequest;
+    }
+
+    const cacheId = cacheOptions.requestIdentificationFn(cacheRequest, stringifySearchParams);
+    // cacheIdentifier is used to bind the cache to the current session
+    const currentCache = getCache(getCacheIdentifier());
+    const { method } = cacheRequest;
+
+    // don't use cache if the request method is not part of the configs methods
+    if (!cacheOptions.methods.includes(method.toLowerCase())) {
+      // If it's NOT one of the config.methods, invalidate caches
+      currentCache.delete(cacheId);
+      // also invalidate caches matching to cacheOptions
+      if (cacheOptions.invalidateUrls) {
+        cacheOptions.invalidateUrls.forEach(
+          /** @type {string} */ invalidateUrl => {
+            currentCache.delete(invalidateUrl);
+          },
+        );
+      }
+      // also invalidate caches matching to invalidateUrlsRegex
+      if (cacheOptions.invalidateUrlsRegex) {
+        currentCache.deleteMatched(cacheOptions.invalidateUrlsRegex);
+      }
+
+      return cacheRequest;
+    }
+
+    const pendingRequest = currentCache.getPendingRequest(cacheId);
+    if (pendingRequest) {
+      // there is another concurrent request, wait for it to finish
+      await pendingRequest;
+    }
+
+    const cacheResponse = currentCache.get(cacheId, cacheOptions.timeToLive);
+    if (cacheResponse) {
+      cacheRequest.cacheOptions = cacheRequest.cacheOptions ?? { useCache: false };
+      const response = /** @type {CacheResponse} */ cacheResponse.clone();
+      response.request = cacheRequest;
+      response.fromCache = true;
+      return response;
+    }
+
+    // we do want to use caching for this requesting, but it's not already cached
+    // mark this as a pending request, so that concurrent requests can reuse it from the cache
+    currentCache.setPendingRequest(cacheId);
+
+    return cacheRequest;
+  };
+};
+
+/**
+ * Response interceptor to cache relevant requests
+ * @param {function(): string} getCacheIdentifier used to invalidate cache if identifier is changed
+ * @param {CacheOptions} globalCacheOptions
+ * @returns {ResponseInterceptor}
+ */
+const createCacheResponseInterceptor = (getCacheIdentifier, globalCacheOptions) => {
+  const validatedInitialCacheOptions = validateCacheOptions(globalCacheOptions);
+
+  /**
+   * Axios response https://github.com/axios/axios#response-schema
+   */
+  return /** @param {CacheResponse} cacheResponse */ async cacheResponse => {
+    if (!getCacheIdentifier()) {
+      throw new Error(`getCacheIdentifier returns falsy`);
+    }
+
+    if (!cacheResponse.request) {
+      throw new Error('Missing request in response.');
+    }
+
+    const cacheOptions = validateCacheOptions({
+      ...validatedInitialCacheOptions,
+      ...cacheResponse.request?.cacheOptions,
+    });
+
+    // string that identifies cache entry
+    const cacheId = cacheOptions.requestIdentificationFn(
+      cacheResponse.request,
+      stringifySearchParams,
+    );
+    const currentCache = getCache(getCacheIdentifier());
+    const isAlreadyFromCache = !!cacheResponse.fromCache;
+    // caching all responses with not default `timeToLive`
+    const isCacheActive = cacheOptions.timeToLive > 0;
+    const isMethodSupported = cacheOptions.methods.includes(
+      cacheResponse.request.method.toLowerCase(),
+    );
+    // if the request is one of the options.methods; store response in cache
+    if (!isAlreadyFromCache && isCacheActive && isMethodSupported) {
+      // store the response data in the cache and mark request as resolved
+      currentCache.set(cacheId, cacheResponse.clone());
+    }
+
+    currentCache.resolvePendingRequest(cacheId);
+    return cacheResponse;
+  };
+};
+
+/**
+ * Response interceptor to cache relevant requests
+ * @param {function(): string} getCacheIdentifier used to invalidate cache if identifier is changed
+ * @param {CacheOptions} globalCacheOptions
+ * @returns [{RequestInterceptor}, {ResponseInterceptor}]
+ */
+export const createCacheInterceptors = (getCacheIdentifier, globalCacheOptions) => {
+  const requestInterceptor = createCacheRequestInterceptor(getCacheIdentifier, globalCacheOptions);
+  const responseInterceptor = createCacheResponseInterceptor(
+    getCacheIdentifier,
+    globalCacheOptions,
+  );
+  return [requestInterceptor, responseInterceptor];
+};
diff --git a/packages/ajax/src/interceptors/index.js b/packages/ajax/src/interceptors/index.js
new file mode 100644
index 000000000..ad5c8d1fa
--- /dev/null
+++ b/packages/ajax/src/interceptors/index.js
@@ -0,0 +1,3 @@
+export { acceptLanguageRequestInterceptor } from './acceptLanguageHeader.js';
+export { createXsrfRequestInterceptor } from './xsrfHeader.js';
+export { createCacheInterceptors } from './cacheInterceptors.js';
diff --git a/packages/ajax/src/interceptors.js b/packages/ajax/src/interceptors/xsrfHeader.js
similarity index 60%
rename from packages/ajax/src/interceptors.js
rename to packages/ajax/src/interceptors/xsrfHeader.js
index 41a6dd410..f1b2ec8c6 100644
--- a/packages/ajax/src/interceptors.js
+++ b/packages/ajax/src/interceptors/xsrfHeader.js
@@ -1,4 +1,4 @@
-import './typedef.js';
+import '../typedef.js';
 
 /**
  * @param {string} name the cookie name
@@ -10,21 +10,6 @@ export function getCookie(name, _document = document) {
   return match ? decodeURIComponent(match[3]) : null;
 }
 
-/**
- * Transforms a request, adding an accept-language header with the current application's locale
- * if it has not already been set.
- * @type {RequestInterceptor}
- */
-export async function acceptLanguageRequestInterceptor(request) {
-  if (!request.headers.has('accept-language')) {
-    const documentLocale = document.documentElement.lang;
-    const localizeLang = document.documentElement.getAttribute('data-localize-lang');
-    const locale = localizeLang || documentLocale || 'en';
-    request.headers.set('accept-language', locale);
-  }
-  return request;
-}
-
 /**
  * Creates a request transformer that adds a XSRF header for protecting
  * against cross-site request forgery.
@@ -33,7 +18,7 @@ export async function acceptLanguageRequestInterceptor(request) {
  * @param {Document | { cookie: string }} _document overwriteable for testing
  * @returns {RequestInterceptor}
  */
-export function createXSRFRequestInterceptor(cookieName, headerName, _document = document) {
+export function createXsrfRequestInterceptor(cookieName, headerName, _document = document) {
   /**
    * @type {RequestInterceptor}
    */
diff --git a/packages/ajax/src/typedef.js b/packages/ajax/src/typedef.js
index 002770087..201b0de78 100644
--- a/packages/ajax/src/typedef.js
+++ b/packages/ajax/src/typedef.js
@@ -1,6 +1,6 @@
 /**
  * @typedef {import('../types/types').LionRequestInit} LionRequestInit
- * @typedef {import('../types/types').AjaxClientConfig} AjaxClientConfig
+ * @typedef {import('../types/types').AjaxConfig} AjaxConfig
  * @typedef {import('../types/types').RequestInterceptor} RequestInterceptor
  * @typedef {import('../types/types').ResponseInterceptor} ResponseInterceptor
  * @typedef {import('../types/types').CacheConfig} CacheConfig
diff --git a/packages/ajax/test/AjaxClient.test.js b/packages/ajax/test/Ajax.test.js
similarity index 81%
rename from packages/ajax/test/AjaxClient.test.js
rename to packages/ajax/test/Ajax.test.js
index 9947feefb..f7ae7dc9b 100644
--- a/packages/ajax/test/AjaxClient.test.js
+++ b/packages/ajax/test/Ajax.test.js
@@ -1,17 +1,17 @@
 import { expect } from '@open-wc/testing';
 import { stub, useFakeTimers } from 'sinon';
-import { AjaxClient, AjaxClientFetchError } from '@lion/ajax';
+import { Ajax, AjaxFetchError } from '@lion/ajax';
 
-describe('AjaxClient', () => {
+describe('Ajax', () => {
   /** @type {import('sinon').SinonStub} */
   let fetchStub;
-  /** @type {AjaxClient} */
+  /** @type {Ajax} */
   let ajax;
 
   beforeEach(() => {
     fetchStub = stub(window, 'fetch');
     fetchStub.returns(Promise.resolve(new Response('mock response')));
-    ajax = new AjaxClient();
+    ajax = new Ajax();
   });
 
   afterEach(() => {
@@ -42,7 +42,7 @@ describe('AjaxClient', () => {
         },
       };
       // When
-      const ajax1 = new AjaxClient(config);
+      const ajax1 = new Ajax(config);
       const result = ajax1.options;
       // Then
       expect(result).to.deep.equal(expected);
@@ -58,7 +58,7 @@ describe('AjaxClient', () => {
       };
       // When
       // @ts-expect-error
-      const ajax1 = new AjaxClient(config);
+      const ajax1 = new Ajax(config);
       const result = ajax1.options?.cacheOptions?.getCacheIdentifier;
       // Then
       expect(result).not.to.be.undefined;
@@ -66,9 +66,9 @@ describe('AjaxClient', () => {
     });
   });
 
-  describe('request()', () => {
+  describe('fetch()', () => {
     it('calls fetch with the given args, returning the result', async () => {
-      const response = await (await ajax.request('/foo', { method: 'POST' })).text();
+      const response = await (await ajax.fetch('/foo', { method: 'POST' })).text();
 
       expect(fetchStub).to.have.been.calledOnce;
       const request = fetchStub.getCall(0).args[0];
@@ -82,9 +82,9 @@ describe('AjaxClient', () => {
 
       let thrown = false;
       try {
-        await ajax.request('/foo');
+        await ajax.fetch('/foo');
       } catch (e) {
-        expect(e).to.be.an.instanceOf(AjaxClientFetchError);
+        expect(e).to.be.an.instanceOf(AjaxFetchError);
         expect(e.request).to.be.an.instanceOf(Request);
         expect(e.response).to.be.an.instanceOf(Response);
         thrown = true;
@@ -97,9 +97,9 @@ describe('AjaxClient', () => {
 
       let thrown = false;
       try {
-        await ajax.request('/foo');
+        await ajax.fetch('/foo');
       } catch (e) {
-        expect(e).to.be.an.instanceOf(AjaxClientFetchError);
+        expect(e).to.be.an.instanceOf(AjaxFetchError);
         expect(e.request).to.be.an.instanceOf(Request);
         expect(e.response).to.be.an.instanceOf(Response);
         thrown = true;
@@ -108,32 +108,32 @@ describe('AjaxClient', () => {
     });
   });
 
-  describe('requestJson', () => {
+  describe('fetchtJson', () => {
     beforeEach(() => {
       fetchStub.returns(Promise.resolve(new Response('{}')));
     });
 
     it('sets json accept header', async () => {
-      await ajax.requestJson('/foo');
+      await ajax.fetchJson('/foo');
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.get('accept')).to.equal('application/json');
     });
 
     it('decodes response from json', async () => {
       fetchStub.returns(Promise.resolve(new Response('{"a":1,"b":2}')));
-      const response = await ajax.requestJson('/foo');
+      const response = await ajax.fetchJson('/foo');
       expect(response.body).to.eql({ a: 1, b: 2 });
     });
 
     describe('given a request body', () => {
       it('encodes the request body as json', async () => {
-        await ajax.requestJson('/foo', { method: 'POST', body: { a: 1, b: 2 } });
+        await ajax.fetchJson('/foo', { method: 'POST', body: { a: 1, b: 2 } });
         const request = fetchStub.getCall(0).args[0];
         expect(await request.text()).to.equal('{"a":1,"b":2}');
       });
 
       it('sets json content-type header', async () => {
-        await ajax.requestJson('/foo', { method: 'POST', body: { a: 1, b: 2 } });
+        await ajax.fetchJson('/foo', { method: 'POST', body: { a: 1, b: 2 } });
         const request = fetchStub.getCall(0).args[0];
         expect(request.headers.get('content-type')).to.equal('application/json');
       });
@@ -141,9 +141,9 @@ describe('AjaxClient', () => {
 
     describe('given a json prefix', () => {
       it('strips json prefix from response before decoding', async () => {
-        const localAjax = new AjaxClient({ jsonPrefix: '//.,!' });
+        const localAjax = new Ajax({ jsonPrefix: '//.,!' });
         fetchStub.returns(Promise.resolve(new Response('//.,!{"a":1,"b":2}')));
-        const response = await localAjax.requestJson('/foo');
+        const response = await localAjax.fetchJson('/foo');
         expect(response.body).to.eql({ a: 1, b: 2 });
       });
     });
@@ -154,7 +154,7 @@ describe('AjaxClient', () => {
       ajax.addRequestInterceptor(async r => new Request(`${r.url}/intercepted-1`));
       ajax.addRequestInterceptor(async r => new Request(`${r.url}/intercepted-2`));
 
-      await ajax.request('/foo', { method: 'POST' });
+      await ajax.fetch('/foo', { method: 'POST' });
 
       const request = fetchStub.getCall(0).args[0];
       expect(request.url).to.equal(`${window.location.origin}/foo/intercepted-1/intercepted-2`);
@@ -173,7 +173,7 @@ describe('AjaxClient', () => {
         return new Response(`${body} intercepted-2`, { status, statusText, headers });
       });
 
-      const response = await (await ajax.request('/foo', { method: 'POST' })).text();
+      const response = await (await ajax.fetch('/foo', { method: 'POST' })).text();
       expect(response).to.equal('mock response intercepted-1 intercepted-2');
     });
 
@@ -190,7 +190,7 @@ describe('AjaxClient', () => {
       ajax.addRequestInterceptor(interceptor3);
       ajax.removeRequestInterceptor(interceptor1);
 
-      await ajax.request('/foo', { method: 'POST' });
+      await ajax.fetch('/foo', { method: 'POST' });
 
       const request = fetchStub.getCall(0).args[0];
       expect(request.url).to.equal(`${window.location.origin}/foo/intercepted-2/intercepted-3`);
@@ -203,7 +203,7 @@ describe('AjaxClient', () => {
       // @ts-expect-error we're mocking the response as a simple promise which returns a string
       ajax.removeResponseInterceptor(interceptor);
 
-      const response = await ajax.request('/foo', { method: 'POST' });
+      const response = await ajax.fetch('/foo', { method: 'POST' });
       const text = await response.text();
       expect(text).to.equal('mock response');
     });
@@ -211,14 +211,14 @@ describe('AjaxClient', () => {
 
   describe('accept-language header', () => {
     it('is set by default based on localize.locale', async () => {
-      await ajax.request('/foo');
+      await ajax.fetch('/foo');
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.get('accept-language')).to.equal('en');
     });
 
     it('can be disabled', async () => {
-      const customAjax = new AjaxClient({ addAcceptLanguage: false });
-      await customAjax.request('/foo');
+      const customAjax = new Ajax({ addAcceptLanguage: false });
+      await customAjax.fetch('/foo');
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.has('accept-language')).to.be.false;
     });
@@ -237,27 +237,27 @@ describe('AjaxClient', () => {
     });
 
     it('XSRF token header is set based on cookie', async () => {
-      await ajax.request('/foo');
+      await ajax.fetch('/foo');
 
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.get('X-XSRF-TOKEN')).to.equal('1234');
     });
 
     it('XSRF behavior can be disabled', async () => {
-      const customAjax = new AjaxClient({ xsrfCookieName: null, xsrfHeaderName: null });
-      await customAjax.request('/foo');
-      await ajax.request('/foo');
+      const customAjax = new Ajax({ xsrfCookieName: null, xsrfHeaderName: null });
+      await customAjax.fetch('/foo');
+      await ajax.fetch('/foo');
 
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.has('X-XSRF-TOKEN')).to.be.false;
     });
 
     it('XSRF token header and cookie can be customized', async () => {
-      const customAjax = new AjaxClient({
+      const customAjax = new Ajax({
         xsrfCookieName: 'CSRF-TOKEN',
         xsrfHeaderName: 'X-CSRF-TOKEN',
       });
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
 
       const request = fetchStub.getCall(0).args[0];
       expect(request.headers.get('X-CSRF-TOKEN')).to.equal('5678');
@@ -283,9 +283,9 @@ describe('AjaxClient', () => {
       getCacheIdentifier = () => String(cacheId);
     });
 
-    it('allows configuring cache interceptors on the AjaxClient config', async () => {
+    it('allows configuring cache interceptors on the Ajax config', async () => {
       newCacheId();
-      const customAjax = new AjaxClient({
+      const customAjax = new Ajax({
         cacheOptions: {
           useCache: true,
           timeToLive: 100,
@@ -298,22 +298,22 @@ describe('AjaxClient', () => {
       });
 
       // Smoke test 1: verify caching works
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
       expect(fetchStub.callCount).to.equal(1);
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
       expect(fetchStub.callCount).to.equal(1);
 
       // Smoke test 2: verify caching is invalidated on non-get method
-      await customAjax.request('/foo', { method: 'POST' });
+      await customAjax.fetch('/foo', { method: 'POST' });
       expect(fetchStub.callCount).to.equal(2);
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
       expect(fetchStub.callCount).to.equal(3);
 
       // Smoke test 3: verify caching is invalidated after TTL has passed
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
       expect(fetchStub.callCount).to.equal(3);
       clock.tick(101);
-      await customAjax.request('/foo');
+      await customAjax.fetch('/foo');
       expect(fetchStub.callCount).to.equal(4);
       clock.restore();
     });
@@ -326,7 +326,7 @@ describe('AjaxClient', () => {
       const controller = new AbortController();
       const { signal } = controller;
       // Have to do a "real" request to be able to abort it and verify that this throws
-      const req = ajax.request(new URL('./foo.json', import.meta.url).pathname, {
+      const req = ajax.fetch(new URL('./foo.json', import.meta.url).pathname, {
         method: 'GET',
         signal,
       });
diff --git a/packages/ajax/test/ajax.test.js b/packages/ajax/test/ajax.test.js
deleted file mode 100644
index 289a886ef..000000000
--- a/packages/ajax/test/ajax.test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { ajax, setAjax, AjaxClient } from '@lion/ajax';
-
-describe('ajax', () => {
-  it('exports an instance of AjaxClient', () => {
-    expect(ajax).to.be.an.instanceOf(AjaxClient);
-  });
-
-  it('can replace ajax with another instance', () => {
-    const newAjax = new AjaxClient();
-    setAjax(newAjax);
-    expect(ajax).to.equal(newAjax);
-  });
-});
diff --git a/packages/ajax/test/index.test.js b/packages/ajax/test/index.test.js
new file mode 100644
index 000000000..bf5d589db
--- /dev/null
+++ b/packages/ajax/test/index.test.js
@@ -0,0 +1,35 @@
+import { expect } from '@open-wc/testing';
+import {
+  ajax,
+  Ajax,
+  AjaxFetchError,
+  acceptLanguageRequestInterceptor,
+  createXsrfRequestInterceptor,
+  createCacheInterceptors,
+} from '@lion/ajax';
+
+describe('public interface', () => {
+  it('exports ajax', () => {
+    expect(ajax).to.exist;
+  });
+
+  it('exports Ajax', () => {
+    expect(Ajax).to.exist;
+  });
+
+  it('exports AjaxFetchError', () => {
+    expect(AjaxFetchError).to.exist;
+  });
+
+  it('exports acceptLanguageRequestInterceptor', () => {
+    expect(acceptLanguageRequestInterceptor).to.exist;
+  });
+
+  it('exports createXsrfRequestInterceptor', () => {
+    expect(createXsrfRequestInterceptor).to.exist;
+  });
+
+  it('exports createCacheInterceptors', () => {
+    expect(createCacheInterceptors).to.exist;
+  });
+});
diff --git a/packages/ajax/test/interceptors-cache.test.js b/packages/ajax/test/interceptors-cache.test.js
deleted file mode 100644
index 35a738dbd..000000000
--- a/packages/ajax/test/interceptors-cache.test.js
+++ /dev/null
@@ -1,521 +0,0 @@
-import { aTimeout, expect } from '@open-wc/testing';
-import { spy, stub, useFakeTimers } from 'sinon';
-import '../src/typedef.js';
-
-import { cacheRequestInterceptorFactory, cacheResponseInterceptorFactory, ajax } from '../index.js';
-
-describe('ajax cache', () => {
-  /** @type {number | undefined} */
-  let cacheId;
-  /** @type {import('sinon').SinonStub} */
-  let fetchStub;
-  /** @type {() => string} */
-  let getCacheIdentifier;
-
-  const newCacheId = () => {
-    if (!cacheId) {
-      cacheId = 1;
-    } else {
-      cacheId += 1;
-    }
-    return cacheId;
-  };
-
-  /**
-   * @param {ajax} ajaxInstance
-   * @param {CacheOptions} options
-   */
-  const addCacheInterceptors = (ajaxInstance, options) => {
-    const requestInterceptorIndex =
-      ajaxInstance._requestInterceptors.push(
-        cacheRequestInterceptorFactory(getCacheIdentifier, options),
-      ) - 1;
-
-    const responseInterceptorIndex =
-      ajaxInstance._responseInterceptors.push(
-        cacheResponseInterceptorFactory(getCacheIdentifier, options),
-      ) - 1;
-
-    return {
-      requestInterceptorIndex,
-      responseInterceptorIndex,
-    };
-  };
-
-  /**
-   * @param {ajax} ajaxInstance
-   * @param {{requestInterceptorIndex: number, responseInterceptorIndex: number}} indexes
-   */
-  const removeCacheInterceptors = (
-    ajaxInstance,
-    { requestInterceptorIndex, responseInterceptorIndex },
-  ) => {
-    ajaxInstance._requestInterceptors.splice(requestInterceptorIndex, 1);
-    ajaxInstance._responseInterceptors.splice(responseInterceptorIndex, 1);
-  };
-
-  beforeEach(() => {
-    getCacheIdentifier = () => String(cacheId);
-    fetchStub = stub(window, 'fetch');
-    fetchStub.returns(Promise.resolve(new Response('mock response')));
-  });
-
-  afterEach(() => {
-    fetchStub.restore();
-  });
-
-  describe('Original ajax instance', () => {
-    it('allows direct ajax calls without cache interceptors configured', async () => {
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(2);
-    });
-  });
-
-  describe('Cache config validation', () => {
-    it('validates `useCache`', () => {
-      newCacheId();
-      const test = () => {
-        const indexes = addCacheInterceptors(ajax, {
-          // @ts-ignore needed for test
-          useCache: 'fakeUseCacheType',
-        });
-        removeCacheInterceptors(ajax, indexes);
-      };
-      expect(test).to.throw();
-    });
-
-    it('validates property `timeToLive` throws if not type `number`', () => {
-      newCacheId();
-      expect(() => {
-        const indexes = addCacheInterceptors(ajax, {
-          useCache: true,
-          // @ts-ignore needed for test
-          timeToLive: '',
-        });
-        removeCacheInterceptors(ajax, indexes);
-      }).to.throw();
-    });
-
-    it('validates cache identifier function', () => {
-      // @ts-ignore needed for test
-      cacheId = '';
-
-      const indexes = addCacheInterceptors(ajax, { useCache: true });
-
-      return ajax.request('/test').catch(
-        /** @param {Error} err */ err => {
-          expect(err.message).to.equal('getCacheIdentifier returns falsy');
-
-          removeCacheInterceptors(ajax, indexes);
-        },
-      );
-    });
-
-    it("throws when using methods other than `['get']`", () => {
-      newCacheId();
-
-      expect(() => {
-        const indexes = addCacheInterceptors(ajax, {
-          useCache: true,
-          methods: ['get', 'post'],
-        });
-        removeCacheInterceptors(ajax, indexes);
-      }).to.throw(/not yet supported/);
-    });
-
-    it('throws error when requestIdentificationFn is not a function', () => {
-      newCacheId();
-
-      expect(() => {
-        const indexes = addCacheInterceptors(ajax, {
-          useCache: true,
-          // @ts-ignore needed for test
-          requestIdentificationFn: 'not a function',
-        });
-        removeCacheInterceptors(ajax, indexes);
-      }).to.throw(/Property `requestIdentificationFn` must be of type `function`/);
-    });
-  });
-
-  describe('Cached responses', () => {
-    it('returns the cached object on second call with `useCache: true`', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 100,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test');
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(1);
-
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('all calls with non-default `timeToLive` are cached proactively', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: false,
-        timeToLive: 100,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test');
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(2);
-      await ajax.request('/test', {
-        cacheOptions: {
-          useCache: true,
-        },
-      });
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('returns the cached object on second call with `useCache: true`, with querystring parameters', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 100,
-      });
-
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test', {
-        params: {
-          q: 'test',
-          page: 1,
-        },
-      });
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
-      await ajax.request('/test', {
-        params: {
-          q: 'test',
-          page: 1,
-        },
-      });
-      expect(fetchStub.callCount).to.equal(1);
-      // a request with different param should not be cached
-      await ajax.request('/test', {
-        params: {
-          q: 'test',
-          page: 2,
-        },
-      });
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('uses cache when inside `timeToLive: 5000` window', async () => {
-      newCacheId();
-      const clock = useFakeTimers({
-        shouldAdvanceTime: true,
-      });
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 5000,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test');
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
-      expect(fetchStub.callCount).to.equal(1);
-      clock.tick(4900);
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(1);
-      clock.tick(5100);
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxRequestSpy.restore();
-      clock.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('uses custom requestIdentificationFn when passed', async () => {
-      newCacheId();
-
-      const customRequestIdFn = /** @type {RequestIdentificationFn} */ (request, serializer) => {
-        let serializedRequestParams = '';
-        if (request.params) {
-          serializedRequestParams = `?${serializer(request.params)}`;
-        }
-        return `${new URL(/** @type {string} */ (request.url)).pathname}-${request.headers?.get(
-          'x-id',
-        )}${serializedRequestParams}`;
-      };
-      const reqIdSpy = spy(customRequestIdFn);
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        requestIdentificationFn: reqIdSpy,
-      });
-
-      await ajax.request('/test', { headers: { 'x-id': '1' } });
-      expect(reqIdSpy.calledOnce);
-      expect(reqIdSpy.returnValues[0]).to.equal(`/test-1`);
-      removeCacheInterceptors(ajax, indexes);
-    });
-  });
-
-  describe('Cache invalidation', () => {
-    it('previously cached data has to be invalidated when regex invalidation rule triggered', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 1000,
-        invalidateUrlsRegex: /foo/gi,
-      });
-
-      await ajax.request('/test'); // new url
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/test'); // cached
-      expect(fetchStub.callCount).to.equal(1);
-
-      await ajax.request('/foo-request-1'); // new url
-      expect(fetchStub.callCount).to.equal(2);
-      await ajax.request('/foo-request-1'); // cached
-      expect(fetchStub.callCount).to.equal(2);
-
-      await ajax.request('/foo-request-3'); // new url
-      expect(fetchStub.callCount).to.equal(3);
-
-      await ajax.request('/test', { method: 'POST' }); // clear cache
-      expect(fetchStub.callCount).to.equal(4);
-      await ajax.request('/foo-request-1'); // not cached anymore
-      expect(fetchStub.callCount).to.equal(5);
-      await ajax.request('/foo-request-2'); // not cached anymore
-      expect(fetchStub.callCount).to.equal(6);
-
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('previously cached data has to be invalidated when regex invalidation rule triggered and urls are nested', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 1000,
-        invalidateUrlsRegex: /posts/gi,
-      });
-
-      await ajax.request('/test');
-      await ajax.request('/test'); // cached
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/posts');
-      expect(fetchStub.callCount).to.equal(2);
-      await ajax.request('/posts'); // cached
-      expect(fetchStub.callCount).to.equal(2);
-      await ajax.request('/posts/1');
-      expect(fetchStub.callCount).to.equal(3);
-      await ajax.request('/posts/1'); // cached
-      expect(fetchStub.callCount).to.equal(3);
-      // cleans cache for defined urls
-      await ajax.request('/test', { method: 'POST' });
-      expect(fetchStub.callCount).to.equal(4);
-      await ajax.request('/posts'); // no longer cached => new request
-      expect(fetchStub.callCount).to.equal(5);
-      await ajax.request('/posts/1'); // no longer cached => new request
-      expect(fetchStub.callCount).to.equal(6);
-
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('deletes cache after one hour', async () => {
-      newCacheId();
-      const clock = useFakeTimers({
-        shouldAdvanceTime: true,
-      });
-
-      const ajaxRequestSpy = spy(ajax, 'request');
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 1000 * 60 * 60,
-      });
-
-      await ajax.request('/test-hour');
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test-hour')).to.be.true;
-      expect(fetchStub.callCount).to.equal(1);
-      clock.tick(1000 * 60 * 59); // 0:59 hour
-      await ajax.request('/test-hour');
-      expect(fetchStub.callCount).to.equal(1);
-      clock.tick(1000 * 60 * 2); // +2 minutes => 1:01 hour
-      await ajax.request('/test-hour');
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxRequestSpy.restore();
-      clock.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('invalidates invalidateUrls endpoints', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 500,
-      });
-
-      const actionConfig = {
-        cacheOptions: {
-          invalidateUrls: ['/test-invalid-url'],
-        },
-      };
-
-      await ajax.request('/test-valid-url', { ...actionConfig });
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/test-invalid-url');
-      expect(fetchStub.callCount).to.equal(2);
-      // 'post' will invalidate 'own' cache and the one mentioned in config
-      await ajax.request('/test-valid-url', { ...actionConfig, method: 'POST' });
-      expect(fetchStub.callCount).to.equal(3);
-      await ajax.request('/test-invalid-url');
-      // indicates that 'test-invalid-url' cache was removed
-      // because the server registered new request
-      expect(fetchStub.callCount).to.equal(4);
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('invalidates cache on a post', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 100,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test-post');
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test-post')).to.be.true;
-      expect(fetchStub.callCount).to.equal(1);
-      await ajax.request('/test-post', { method: 'POST', body: 'data-post' });
-      expect(ajaxRequestSpy.calledTwice).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test-post')).to.be.true;
-      expect(fetchStub.callCount).to.equal(2);
-      await ajax.request('/test-post');
-      expect(fetchStub.callCount).to.equal(3);
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('caches response but does not return it when expiration time is 0', async () => {
-      newCacheId();
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 0,
-      });
-
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      await ajax.request('/test');
-      const clock = useFakeTimers();
-      expect(ajaxRequestSpy.calledOnce).to.be.true;
-      expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
-      clock.tick(1);
-      clock.restore();
-      await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('does not use cache when `useCache: false` in the action', async () => {
-      newCacheId();
-      getCacheIdentifier = () => 'cacheIdentifier2';
-
-      const ajaxAlwaysRequestSpy = spy(ajax, 'request');
-      const indexes = addCacheInterceptors(ajax, { useCache: true });
-
-      await ajax.request('/test');
-      expect(ajaxAlwaysRequestSpy.calledOnce, 'calledOnce').to.be.true;
-      expect(ajaxAlwaysRequestSpy.calledWith('/test'));
-      await ajax.request('/test', { cacheOptions: { useCache: false } });
-      expect(fetchStub.callCount).to.equal(2);
-      ajaxAlwaysRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('caches concurrent requests', async () => {
-      newCacheId();
-
-      let i = 0;
-      fetchStub.returns(
-        new Promise(resolve => {
-          i += 1;
-          setTimeout(() => {
-            resolve(new Response(`mock response ${i}`));
-          }, 5);
-        }),
-      );
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 100,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      const request1 = ajax.request('/test');
-      const request2 = ajax.request('/test');
-      await aTimeout(1);
-      const request3 = ajax.request('/test');
-      await aTimeout(3);
-      const request4 = ajax.request('/test');
-      const responses = await Promise.all([request1, request2, request3, request4]);
-      expect(fetchStub.callCount).to.equal(1);
-      const responseTexts = await Promise.all(responses.map(r => r.text()));
-      expect(responseTexts).to.eql([
-        'mock response 1',
-        'mock response 1',
-        'mock response 1',
-        'mock response 1',
-      ]);
-
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-
-    it('preserves status and headers when returning cached response', async () => {
-      newCacheId();
-      fetchStub.returns(
-        Promise.resolve(
-          new Response('mock response', { status: 206, headers: { 'x-foo': 'x-bar' } }),
-        ),
-      );
-
-      const indexes = addCacheInterceptors(ajax, {
-        useCache: true,
-        timeToLive: 100,
-      });
-      const ajaxRequestSpy = spy(ajax, 'request');
-
-      const response1 = await ajax.request('/test');
-      const response2 = await ajax.request('/test');
-      expect(fetchStub.callCount).to.equal(1);
-      expect(response1.status).to.equal(206);
-      expect(response1.headers.get('x-foo')).to.equal('x-bar');
-      expect(response2.status).to.equal(206);
-      expect(response2.headers.get('x-foo')).to.equal('x-bar');
-
-      ajaxRequestSpy.restore();
-      removeCacheInterceptors(ajax, indexes);
-    });
-  });
-});
diff --git a/packages/ajax/test/interceptors.test.js b/packages/ajax/test/interceptors.test.js
index b0350d0c2..778a34fd3 100644
--- a/packages/ajax/test/interceptors.test.js
+++ b/packages/ajax/test/interceptors.test.js
@@ -1,9 +1,12 @@
-import { expect } from '@open-wc/testing';
-import {
-  createXSRFRequestInterceptor,
-  getCookie,
-  acceptLanguageRequestInterceptor,
-} from '@lion/ajax';
+import { aTimeout, expect } from '@open-wc/testing';
+import { spy, stub, useFakeTimers } from 'sinon';
+import '../src/typedef.js';
+import { acceptLanguageRequestInterceptor } from '../src/interceptors/acceptLanguageHeader.js';
+import { createXsrfRequestInterceptor, getCookie } from '../src/interceptors/xsrfHeader.js';
+import { createCacheInterceptors } from '../src/interceptors/cacheInterceptors.js';
+import { Ajax } from '../index.js';
+
+const ajax = new Ajax();
 
 describe('interceptors', () => {
   describe('getCookie()', () => {
@@ -40,9 +43,9 @@ describe('interceptors', () => {
     });
   });
 
-  describe('createXSRFRequestInterceptor()', () => {
+  describe('createXsrfRequestInterceptor()', () => {
     it('adds the xsrf token header to the request', () => {
-      const interceptor = createXSRFRequestInterceptor('XSRF-TOKEN', 'X-XSRF-TOKEN', {
+      const interceptor = createXsrfRequestInterceptor('XSRF-TOKEN', 'X-XSRF-TOKEN', {
         cookie: 'XSRF-TOKEN=foo',
       });
       const request = new Request('/foo/');
@@ -51,7 +54,7 @@ describe('interceptors', () => {
     });
 
     it('does not set anything if the cookie is not there', () => {
-      const interceptor = createXSRFRequestInterceptor('XSRF-TOKEN', 'X-XSRF-TOKEN', {
+      const interceptor = createXsrfRequestInterceptor('XSRF-TOKEN', 'X-XSRF-TOKEN', {
         cookie: 'XXSRF-TOKEN=foo',
       });
       const request = new Request('/foo/');
@@ -59,4 +62,525 @@ describe('interceptors', () => {
       expect(request.headers.get('X-XSRF-TOKEN')).to.equal(null);
     });
   });
+
+  describe('cache interceptors', () => {
+    /** @type {number | undefined} */
+    let cacheId;
+    /** @type {import('sinon').SinonStub} */
+    let fetchStub;
+    /** @type {() => string} */
+    let getCacheIdentifier;
+
+    const newCacheId = () => {
+      if (!cacheId) {
+        cacheId = 1;
+      } else {
+        cacheId += 1;
+      }
+      return cacheId;
+    };
+
+    /**
+     * @param {ajax} ajaxInstance
+     * @param {CacheOptions} options
+     */
+    const addCacheInterceptors = (ajaxInstance, options) => {
+      const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+        getCacheIdentifier,
+        options,
+      );
+
+      const requestInterceptorIndex =
+        ajaxInstance._requestInterceptors.push(
+          /** @type {RequestInterceptor} */ (cacheRequestInterceptor),
+        ) - 1;
+
+      const responseInterceptorIndex =
+        ajaxInstance._responseInterceptors.push(
+          /** @type {ResponseInterceptor} */ (cacheResponseInterceptor),
+        ) - 1;
+
+      return {
+        requestInterceptorIndex,
+        responseInterceptorIndex,
+      };
+    };
+
+    /**
+     * @param {ajax} ajaxInstance
+     * @param {{requestInterceptorIndex: number, responseInterceptorIndex: number}} indexes
+     */
+    const removeCacheInterceptors = (
+      ajaxInstance,
+      { requestInterceptorIndex, responseInterceptorIndex },
+    ) => {
+      ajaxInstance._requestInterceptors.splice(requestInterceptorIndex, 1);
+      ajaxInstance._responseInterceptors.splice(responseInterceptorIndex, 1);
+    };
+
+    beforeEach(() => {
+      getCacheIdentifier = () => String(cacheId);
+      fetchStub = stub(window, 'fetch');
+      fetchStub.returns(Promise.resolve(new Response('mock response')));
+    });
+
+    afterEach(() => {
+      fetchStub.restore();
+    });
+
+    describe('Original ajax instance', () => {
+      it('allows direct ajax calls without cache interceptors configured', async () => {
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(2);
+      });
+    });
+
+    describe('Cache config validation', () => {
+      it('validates `useCache`', () => {
+        newCacheId();
+        const test = () => {
+          const indexes = addCacheInterceptors(ajax, {
+            // @ts-ignore needed for test
+            useCache: 'fakeUseCacheType',
+          });
+          removeCacheInterceptors(ajax, indexes);
+        };
+        expect(test).to.throw();
+      });
+
+      it('validates property `timeToLive` throws if not type `number`', () => {
+        newCacheId();
+        expect(() => {
+          const indexes = addCacheInterceptors(ajax, {
+            useCache: true,
+            // @ts-ignore needed for test
+            timeToLive: '',
+          });
+          removeCacheInterceptors(ajax, indexes);
+        }).to.throw();
+      });
+
+      it('validates cache identifier function', () => {
+        // @ts-ignore needed for test
+        cacheId = '';
+
+        const indexes = addCacheInterceptors(ajax, { useCache: true });
+
+        return ajax.fetch('/test').catch(
+          /** @param {Error} err */ err => {
+            expect(err.message).to.equal('getCacheIdentifier returns falsy');
+
+            removeCacheInterceptors(ajax, indexes);
+          },
+        );
+      });
+
+      it("throws when using methods other than `['get']`", () => {
+        newCacheId();
+
+        expect(() => {
+          const indexes = addCacheInterceptors(ajax, {
+            useCache: true,
+            methods: ['get', 'post'],
+          });
+          removeCacheInterceptors(ajax, indexes);
+        }).to.throw(/not yet supported/);
+      });
+
+      it('throws error when requestIdentificationFn is not a function', () => {
+        newCacheId();
+
+        expect(() => {
+          const indexes = addCacheInterceptors(ajax, {
+            useCache: true,
+            // @ts-ignore needed for test
+            requestIdentificationFn: 'not a function',
+          });
+          removeCacheInterceptors(ajax, indexes);
+        }).to.throw(/Property `requestIdentificationFn` must be of type `function`/);
+      });
+    });
+
+    describe('Cached responses', () => {
+      it('returns the cached object on second call with `useCache: true`', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 100,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test');
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(1);
+
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('all calls with non-default `timeToLive` are cached proactively', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: false,
+          timeToLive: 100,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test');
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(2);
+        await ajax.fetch('/test', {
+          cacheOptions: {
+            useCache: true,
+          },
+        });
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('returns the cached object on second call with `useCache: true`, with querystring parameters', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 100,
+        });
+
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test', {
+          params: {
+            q: 'test',
+            page: 1,
+          },
+        });
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
+        await ajax.fetch('/test', {
+          params: {
+            q: 'test',
+            page: 1,
+          },
+        });
+        expect(fetchStub.callCount).to.equal(1);
+        // a request with different param should not be cached
+        await ajax.fetch('/test', {
+          params: {
+            q: 'test',
+            page: 2,
+          },
+        });
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('uses cache when inside `timeToLive: 5000` window', async () => {
+        newCacheId();
+        const clock = useFakeTimers({
+          shouldAdvanceTime: true,
+        });
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 5000,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test');
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
+        expect(fetchStub.callCount).to.equal(1);
+        clock.tick(4900);
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(1);
+        clock.tick(5100);
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxRequestSpy.restore();
+        clock.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('uses custom requestIdentificationFn when passed', async () => {
+        newCacheId();
+
+        const customRequestIdFn = /** @type {RequestIdentificationFn} */ (request, serializer) => {
+          let serializedRequestParams = '';
+          if (request.params) {
+            serializedRequestParams = `?${serializer(request.params)}`;
+          }
+          return `${new URL(/** @type {string} */ (request.url)).pathname}-${request.headers?.get(
+            'x-id',
+          )}${serializedRequestParams}`;
+        };
+        const reqIdSpy = spy(customRequestIdFn);
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          requestIdentificationFn: reqIdSpy,
+        });
+
+        await ajax.fetch('/test', { headers: { 'x-id': '1' } });
+        expect(reqIdSpy.calledOnce);
+        expect(reqIdSpy.returnValues[0]).to.equal(`/test-1`);
+        removeCacheInterceptors(ajax, indexes);
+      });
+    });
+
+    describe('Cache invalidation', () => {
+      it('previously cached data has to be invalidated when regex invalidation rule triggered', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 1000,
+          invalidateUrlsRegex: /foo/gi,
+        });
+
+        await ajax.fetch('/test'); // new url
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/test'); // cached
+        expect(fetchStub.callCount).to.equal(1);
+
+        await ajax.fetch('/foo-request-1'); // new url
+        expect(fetchStub.callCount).to.equal(2);
+        await ajax.fetch('/foo-request-1'); // cached
+        expect(fetchStub.callCount).to.equal(2);
+
+        await ajax.fetch('/foo-request-3'); // new url
+        expect(fetchStub.callCount).to.equal(3);
+
+        await ajax.fetch('/test', { method: 'POST' }); // clear cache
+        expect(fetchStub.callCount).to.equal(4);
+        await ajax.fetch('/foo-request-1'); // not cached anymore
+        expect(fetchStub.callCount).to.equal(5);
+        await ajax.fetch('/foo-request-2'); // not cached anymore
+        expect(fetchStub.callCount).to.equal(6);
+
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('previously cached data has to be invalidated when regex invalidation rule triggered and urls are nested', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 1000,
+          invalidateUrlsRegex: /posts/gi,
+        });
+
+        await ajax.fetch('/test');
+        await ajax.fetch('/test'); // cached
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/posts');
+        expect(fetchStub.callCount).to.equal(2);
+        await ajax.fetch('/posts'); // cached
+        expect(fetchStub.callCount).to.equal(2);
+        await ajax.fetch('/posts/1');
+        expect(fetchStub.callCount).to.equal(3);
+        await ajax.fetch('/posts/1'); // cached
+        expect(fetchStub.callCount).to.equal(3);
+        // cleans cache for defined urls
+        await ajax.fetch('/test', { method: 'POST' });
+        expect(fetchStub.callCount).to.equal(4);
+        await ajax.fetch('/posts'); // no longer cached => new request
+        expect(fetchStub.callCount).to.equal(5);
+        await ajax.fetch('/posts/1'); // no longer cached => new request
+        expect(fetchStub.callCount).to.equal(6);
+
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('deletes cache after one hour', async () => {
+        newCacheId();
+        const clock = useFakeTimers({
+          shouldAdvanceTime: true,
+        });
+
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 1000 * 60 * 60,
+        });
+
+        await ajax.fetch('/test-hour');
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test-hour')).to.be.true;
+        expect(fetchStub.callCount).to.equal(1);
+        clock.tick(1000 * 60 * 59); // 0:59 hour
+        await ajax.fetch('/test-hour');
+        expect(fetchStub.callCount).to.equal(1);
+        clock.tick(1000 * 60 * 2); // +2 minutes => 1:01 hour
+        await ajax.fetch('/test-hour');
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxRequestSpy.restore();
+        clock.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('invalidates invalidateUrls endpoints', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 500,
+        });
+
+        const actionConfig = {
+          cacheOptions: {
+            invalidateUrls: ['/test-invalid-url'],
+          },
+        };
+
+        await ajax.fetch('/test-valid-url', { ...actionConfig });
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/test-invalid-url');
+        expect(fetchStub.callCount).to.equal(2);
+        // 'post' will invalidate 'own' cache and the one mentioned in config
+        await ajax.fetch('/test-valid-url', { ...actionConfig, method: 'POST' });
+        expect(fetchStub.callCount).to.equal(3);
+        await ajax.fetch('/test-invalid-url');
+        // indicates that 'test-invalid-url' cache was removed
+        // because the server registered new request
+        expect(fetchStub.callCount).to.equal(4);
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('invalidates cache on a post', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 100,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test-post');
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test-post')).to.be.true;
+        expect(fetchStub.callCount).to.equal(1);
+        await ajax.fetch('/test-post', { method: 'POST', body: 'data-post' });
+        expect(ajaxRequestSpy.calledTwice).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test-post')).to.be.true;
+        expect(fetchStub.callCount).to.equal(2);
+        await ajax.fetch('/test-post');
+        expect(fetchStub.callCount).to.equal(3);
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('caches response but does not return it when expiration time is 0', async () => {
+        newCacheId();
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 0,
+        });
+
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        await ajax.fetch('/test');
+        const clock = useFakeTimers();
+        expect(ajaxRequestSpy.calledOnce).to.be.true;
+        expect(ajaxRequestSpy.calledWith('/test')).to.be.true;
+        clock.tick(1);
+        clock.restore();
+        await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('does not use cache when `useCache: false` in the action', async () => {
+        newCacheId();
+        getCacheIdentifier = () => 'cacheIdentifier2';
+
+        const ajaxAlwaysRequestSpy = spy(ajax, 'fetch');
+        const indexes = addCacheInterceptors(ajax, { useCache: true });
+
+        await ajax.fetch('/test');
+        expect(ajaxAlwaysRequestSpy.calledOnce, 'calledOnce').to.be.true;
+        expect(ajaxAlwaysRequestSpy.calledWith('/test'));
+        await ajax.fetch('/test', { cacheOptions: { useCache: false } });
+        expect(fetchStub.callCount).to.equal(2);
+        ajaxAlwaysRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('caches concurrent requests', async () => {
+        newCacheId();
+
+        let i = 0;
+        fetchStub.returns(
+          new Promise(resolve => {
+            i += 1;
+            setTimeout(() => {
+              resolve(new Response(`mock response ${i}`));
+            }, 5);
+          }),
+        );
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 100,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        const request1 = ajax.fetch('/test');
+        const request2 = ajax.fetch('/test');
+        await aTimeout(1);
+        const request3 = ajax.fetch('/test');
+        await aTimeout(3);
+        const request4 = ajax.fetch('/test');
+        const responses = await Promise.all([request1, request2, request3, request4]);
+        expect(fetchStub.callCount).to.equal(1);
+        const responseTexts = await Promise.all(responses.map(r => r.text()));
+        expect(responseTexts).to.eql([
+          'mock response 1',
+          'mock response 1',
+          'mock response 1',
+          'mock response 1',
+        ]);
+
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+
+      it('preserves status and headers when returning cached response', async () => {
+        newCacheId();
+        fetchStub.returns(
+          Promise.resolve(
+            new Response('mock response', { status: 206, headers: { 'x-foo': 'x-bar' } }),
+          ),
+        );
+
+        const indexes = addCacheInterceptors(ajax, {
+          useCache: true,
+          timeToLive: 100,
+        });
+        const ajaxRequestSpy = spy(ajax, 'fetch');
+
+        const response1 = await ajax.fetch('/test');
+        const response2 = await ajax.fetch('/test');
+        expect(fetchStub.callCount).to.equal(1);
+        expect(response1.status).to.equal(206);
+        expect(response1.headers.get('x-foo')).to.equal('x-bar');
+        expect(response2.status).to.equal(206);
+        expect(response2.headers.get('x-foo')).to.equal('x-bar');
+
+        ajaxRequestSpy.restore();
+        removeCacheInterceptors(ajax, indexes);
+      });
+    });
+  });
 });
diff --git a/packages/ajax/types/types.d.ts b/packages/ajax/types/types.d.ts
index e12b405d2..ba4e9494a 100644
--- a/packages/ajax/types/types.d.ts
+++ b/packages/ajax/types/types.d.ts
@@ -1,5 +1,5 @@
 /**
- * We have a method requestJson that encodes JS Object to
+ * We have a method fetchJson that encodes JS Object to
  * a string automatically for `body` property.
  * Sadly, Typescript doesn't allow us to extend RequestInit
  * and override body prop because it is incompatible, so we
@@ -10,7 +10,7 @@ export interface LionRequestInit extends Omit<RequestInit, 'body'> {
   request?: CacheRequest;
 }
 
-export interface AjaxClientConfig {
+export interface AjaxConfig {
   addAcceptLanguage: boolean;
   xsrfCookieName: string | null;
   xsrfHeaderName: string | null;
@@ -29,7 +29,7 @@ export type Params = { [key: string]: any };
 
 export type RequestIdentificationFn = (
   request: Partial<CacheRequest>,
-  searchParamsSerializer: (params: Params) => string,
+  stringifySearchParams: (params: Params) => string,
 ) => string;
 
 export interface CacheOptions {