I just wrote about using axios interceptor in my NuxtJS server middleware to help with debugging API calls - the other boost that I've been able to realize with this server middleware setup is in improving the speed of my application by caching my API calls, especially those that are just pulling content.
The trick library here is axios-cache-interceptor - the configuration you see here is pretty much the default setup, but even with this I was able to reduce page load times to 50% when pulling pages from a headless CMS. If you need to check on cache hits, just switch libraries to axios-cache-interceptor/dev and this setup will log each axios transaction to the console, along with the cache status.
I'm sure there's a lot more to learn with this library, but I'm very pleased with such simple results already!
import { setupCache, buildMemoryStorage, defaultKeyGenerator, defaultHeaderInterpreter } from 'axios-cache-interceptor'
const axios = require('axios')
const instance = setupCache(
axios.default.create({
baseURL:`${apiprotocol}${cmsServer.url}/`,
timeout: 40000
}),
{
// The storage to save the cache data. There are more available by default.
//
// https://axios-cache-interceptor.js.org/#/pages/storages
storage: buildMemoryStorage(),
// The mechanism to generate a unique key for each request.
//
// https://axios-cache-interceptor.js.org/#/pages/request-id
generateKey: defaultKeyGenerator,
// The mechanism to interpret headers (when cache.interpretHeader is true).
//
// https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=headerinterpreter
headerInterpreter: defaultHeaderInterpreter,
// The function that will receive debug information.
// NOTE: For this to work, you need to enable development mode.
//
// https://axios-cache-interceptor.js.org/#/pages/development-mode
// https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=debug
debug: console.log
}
)