Getting Started

Looking for axios v0?

Install

Add Axios Cache Interceptor and Axios to your project using your favorite package manager:

NPM

npm install axios@^1 axios-cache-interceptor@^1

Browser

<!-- Development UMD build for ES2017+ (~14.2 KiB) -->
<script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>

<!-- Production UMD build for ES5+ (~16.4 KiB) -->
<script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>

Skypack

import Axios from 'https://cdn.skypack.dev/axios';
import { setupCache } from 'https://cdn.skypack.dev/axios-cache-interceptor';

Setup

After installing, you can import the package and apply the interceptor to your axios instance, as shown below:

EcmaScript

import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

const instance = Axios.create();
const axios = setupCache(instance);

const req1 = axios.get('https://api.example.com/');
const req2 = axios.get('https://api.example.com/');

const [res1, res2] = await Promise.all([req1, req2]);

res1.cached; // false
res2.cached; // true

CommonJS

const Axios = require('axios');
const { setupCache } = require('axios-cache-interceptor');

const instance = Axios.create();
const axios = setupCache(instance);

const req1 = axios.get('https://api.example.com/');
const req2 = axios.get('https://api.example.com/');

const [res1, res2] = await Promise.all([req1, req2]);

res1.cached; // false
res2.cached; // true

Browser

const Axios = window.axios;
const { setupCache } = window.AxiosCacheInterceptor;

const instance = Axios.create();
const axios = setupCache(instance);

const req1 = axios.get('https://api.example.com/');
const req2 = axios.get('https://api.example.com/');

const [res1, res2] = await Promise.all([req1, req2]);

res1.cached; // false
res2.cached; // true

Skypack

import Axios from 'https://cdn.skypack.dev/axios';
import { setupCache } from 'https://cdn.skypack.dev/axios-cache-interceptor';

const instance = Axios.create();
const axios = setupCache(instance);

const req1 = axios.get('https://api.example.com/');
const req2 = axios.get('https://api.example.com/');

const [res1, res2] = await Promise.all([req1, req2]);

res1.cached; // false
res2.cached; // true

setupCache(instance) attaches both cache interceptors by default. If you need custom interceptor ordering, see Other Interceptors.

Just the above is sufficient for most use cases. However, you can also customize each cache behavior by passing a configuration object to the setupCache function. And you can also customize some behaviors per request by using the cache option in the request config.

Support Table

Most of axios v0 breaking changes were about typing issues, so your version may work with one outside of this table. Axios and Axios Cache Interceptor v0 are not compatible with Axios and Axios Cache Interceptor v1

Note: Axios was not defined as a peerDependency for all v0 versions, because it had a non-stable semver version. See #145 (Comment)

Axios	Axios Cache Interceptor
>= v1.7.8	>= v1.7.0
>= v1.6	>= v1.3.0 && <= 1.6.2
>= v1.4	>= v1.2.0
>= v1.3.1	>= v1
>= v0.27	>= v0.10.3
>= v0.26	>= v0.8.4
~ v0.25	~ v0.8.4
~ v0.24	>= v0.5 && <= 0.8.3
~ v0.23	~ v0.4
~ v0.22	~ v0.3
v0.21	<= v0.2

AI / LLM Skills

If you are using an AI coding assistant, you can install the axios-cache-interceptor skill to give it up-to-date context about this library:

npx skills add arthurfiorette/axios-cache-interceptor

This uses the Skills framework. Once installed, your AI assistant will have access to the full API reference and usage patterns for this library.

Read More

Some useful links to get you more familiar with the library:

• Debugging requests
• Storages
• Global config
• Per request config
• Response object