A non-invasive, simple, reliable collection of axios extension
- cacheAdapterEnhancer make request cacheable
- throttleAdapterEnhancer make request throttled automatic
npm i axios-extensions -Sor
yarn add axios-extensionsimport axios from 'axios';
import { cacheAdapterEnhancer, throttleAdapterEnhancer } from 'axios-extensions';
// enhance the original axios adapter with throttle and cache enhancer
const http = axios.create({
baseURL: '/',
headers: { 'Cache-Control': 'no-cache' },
adapter: throttleAdapterEnhancer(cacheAdapterEnhancer(axios.defaults.adapter, true))
});It is highly recommended to enable the request logging recorder in development environment(it is disabled in default).
new webpack.DefinePlugin({
'process.env.LOGGER_LEVEL': JSON.stringify('info')
})// package.json
"scripts": {
"start": "cross-env LOGGER_LEVEL=info node server.js"
}cacheAdapterEnhancer(adapter, cacheEnabledByDefault = false, enableCacheFlag = 'cache', defaultCache = new LRUCache({ maxAge: FIVE_MINUTES })) : enhancedAdapter
makes axios cacheable
import axios from 'axios';
import { cacheAdapterEnhancer } from 'axios-extensions';
const http = axios.create({
baseURL: '/',
headers: { 'Cache-Control': 'no-cache' },
// cache will be enabled by default
adapter: cacheAdapterEnhancer(axios.defaults.adapter, true)
});
http.get('/users'); // make real http request
http.get('/users'); // use the response from the cache of previous request, without real http request made
http.get('/users', { cache: false }); // disable cache manually and the the real http request invokedconst http = axios.create({
baseURL: '/',
headers: { 'Cache-Control': 'no-cache' },
// disable the default cache and set the cache flag
adapter: cacheAdapterEnhancer(axios.defaults.adapter, false, 'useCache')
});
http.get('/users'); // default cache was disabled and then the real http request invoked
http.get('/users', { useCache: true }); // make the request cacheable(real http request made due to first request invoke)
http.get('/users', { useCache: true }); // use the response cache from previous requestBesides configuring the request through the cacheAdapterEnhancer, we can enjoy more advanced features via configuring every individual request.
import axios from 'axios';
import { cacheAdapterEnhancer, Cache } from 'axios-extensions';
const http = axios.create({
baseURL: '/',
headers: { 'Cache-Control': 'no-cache' },
// disable the default cache and set the cache flag
adapter: cacheAdapterEnhancer(axios.defaults.adapter, false)
});
http.get('/users', { cache: true }); // make the request cacheable(real http request made due to first request invoke)
// define a cache manually
const cacheA = new Cache();
// or a cache-like instance
const cacheB = { get() {/*...*/}, set() {/*...*/}, del() {/*...*/} };
// two actual request will be made due to the different cache
http.get('/users', { cache: cacheA });
http.get('/users', { cache: cacheB });
// a actual request made and cached due to force update configured
http.get('/users', { cache: cacheA, forceUpdate: true });throttle requests most once per threshold milliseconds
import axios from 'axios';
import { throttleAdapterEnhancer } from 'axios-extensions';
const http = axios.create({
baseURL: '/',
headers: { 'Cache-Control': 'no-cache' },
adapter: throttleAdapterEnhancer(axios.defaults.adapter, 2 * 1000)
});
http.get('/users'); // make real http request
http.get('/users'); // responsed from the cache
http.get('/users'); // responsed from the cache
setTimeout(() => {
http.get('/users'); // after 2s, the real request makes again
}, 2 * 1000);