mirror of
https://github.com/arthurfiorette/axios-cache-interceptor.git
synced 2025-12-08 17:36:16 +00:00
refactor: added debug points
This commit is contained in:
parent
9b9ae3a260
commit
098cf47d06
@ -36,10 +36,6 @@ const { setupCache } = require('axios-cache-interceptor/umd');
|
|||||||
|
|
||||||
## With CDN
|
## With CDN
|
||||||
|
|
||||||
```js
|
|
||||||
const { setupCache } = window.AxiosCacheInterceptor;
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Production for ES6+ (~10.5KiB) -->
|
<!-- Production for ES6+ (~10.5KiB) -->
|
||||||
<script
|
<script
|
||||||
@ -63,6 +59,10 @@ const { setupCache } = window.AxiosCacheInterceptor;
|
|||||||
></script>
|
></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const { setupCache } = window.AxiosCacheInterceptor;
|
||||||
|
```
|
||||||
|
|
||||||
## With URL imports
|
## With URL imports
|
||||||
|
|
||||||
You can import any [CDN Url](#with-cdns) and use it in your code. **UMD Compatible**
|
You can import any [CDN Url](#with-cdns) and use it in your code. **UMD Compatible**
|
||||||
|
|||||||
8
src/cache/cache.ts
vendored
8
src/cache/cache.ts
vendored
@ -163,5 +163,11 @@ export interface CacheInstance {
|
|||||||
* @default console.log
|
* @default console.log
|
||||||
* @see https://axios-cache-interceptor.js.org/#/pages/development-mode
|
* @see https://axios-cache-interceptor.js.org/#/pages/development-mode
|
||||||
*/
|
*/
|
||||||
debug: Console['log'] | undefined;
|
debug: undefined | ((msg: DebugObject) => void);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An object with any possible type that can be used to log and debug information in
|
||||||
|
* `development` mode (a.k.a `__ACI_DEV__ === true`)
|
||||||
|
*/
|
||||||
|
export type DebugObject = Partial<{ id: string; msg: string; data: unknown }>;
|
||||||
|
|||||||
@ -16,6 +16,13 @@ import {
|
|||||||
export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
||||||
const onFulfilled: RequestInterceptor['onFulfilled'] = async (config) => {
|
const onFulfilled: RequestInterceptor['onFulfilled'] = async (config) => {
|
||||||
if (config.cache === false) {
|
if (config.cache === false) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'Ignoring cache because config.cache is false',
|
||||||
|
data: config
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,6 +30,11 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
|||||||
config.cache = { ...axios.defaults.cache, ...config.cache };
|
config.cache = { ...axios.defaults.cache, ...config.cache };
|
||||||
|
|
||||||
if (!isMethodIn(config.method, config.cache.methods)) {
|
if (!isMethodIn(config.method, config.cache.methods)) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: `Ignored because method (${config.method}) is not in cache.methods (${config.cache.methods})`
|
||||||
|
});
|
||||||
|
}
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,6 +54,14 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
|||||||
cache = (await axios.storage.get(key)) as
|
cache = (await axios.storage.get(key)) as
|
||||||
| CachedStorageValue
|
| CachedStorageValue
|
||||||
| LoadingStorageValue;
|
| LoadingStorageValue;
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Waiting list had an deferred for this key, waiting for it to finish'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
break emptyOrStale;
|
break emptyOrStale;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,10 +87,24 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
|||||||
|
|
||||||
if (cache.state === 'stale') {
|
if (cache.state === 'stale') {
|
||||||
updateStaleRequest(cache, config as ConfigWithCache<unknown>);
|
updateStaleRequest(cache, config as ConfigWithCache<unknown>);
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Updated stale request'
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
config.validateStatus = createValidateStatus(config.validateStatus);
|
config.validateStatus = createValidateStatus(config.validateStatus);
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Sending request, waiting for response'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,9 +120,24 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
|||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Detected concurrent request, waiting for it to finish'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
cachedResponse = await deferred;
|
cachedResponse = await deferred;
|
||||||
} catch {
|
} catch (err) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Deferred rejected, requesting again',
|
||||||
|
data: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// The deferred is rejected when the request that we are waiting rejected cache.
|
// The deferred is rejected when the request that we are waiting rejected cache.
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
@ -109,6 +158,13 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance) {
|
|||||||
id: key
|
id: key
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: key,
|
||||||
|
msg: 'Returning cached response'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -33,12 +33,27 @@ export function defaultResponseInterceptor(
|
|||||||
|
|
||||||
// Response is already cached
|
// Response is already cached
|
||||||
if (response.cached) {
|
if (response.cached) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Returned cached response'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skip cache: either false or weird behavior
|
// Skip cache: either false or weird behavior
|
||||||
// config.cache should always exists, at least from global config merge.
|
// config.cache should always exists, at least from global config merge.
|
||||||
if (!response.config.cache) {
|
if (!response.config.cache) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Response with config.cache === false',
|
||||||
|
data: response
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return { ...response, cached: false };
|
return { ...response, cached: false };
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,6 +69,14 @@ export function defaultResponseInterceptor(
|
|||||||
// Should not hit here because of previous response.cached check
|
// Should not hit here because of previous response.cached check
|
||||||
cache.state === 'cached'
|
cache.state === 'cached'
|
||||||
) {
|
) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Response not cached but storage is not loading',
|
||||||
|
data: { cache, response }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,6 +87,13 @@ export function defaultResponseInterceptor(
|
|||||||
!(await testCachePredicate(response, cacheConfig.cachePredicate))
|
!(await testCachePredicate(response, cacheConfig.cachePredicate))
|
||||||
) {
|
) {
|
||||||
await rejectResponse(response.id);
|
await rejectResponse(response.id);
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Cache predicate rejected this response'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,6 +125,19 @@ export function defaultResponseInterceptor(
|
|||||||
// Cache should not be used
|
// Cache should not be used
|
||||||
if (expirationTime === 'dont cache') {
|
if (expirationTime === 'dont cache') {
|
||||||
await rejectResponse(response.id);
|
await rejectResponse(response.id);
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: `Cache header interpreted as 'dont cache'`,
|
||||||
|
data: {
|
||||||
|
cache,
|
||||||
|
response,
|
||||||
|
expirationTime
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -111,6 +154,14 @@ export function defaultResponseInterceptor(
|
|||||||
response.headers[Header.XAxiosCacheStaleIfError] = String(ttl);
|
response.headers[Header.XAxiosCacheStaleIfError] = String(ttl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Useful response configuration found',
|
||||||
|
data: { cacheConfig, ttl, cacheResponse: data }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Update other entries before updating himself
|
// Update other entries before updating himself
|
||||||
if (cacheConfig?.update) {
|
if (cacheConfig?.update) {
|
||||||
await updateCache(axios.storage, response, cacheConfig.update);
|
await updateCache(axios.storage, response, cacheConfig.update);
|
||||||
@ -124,12 +175,31 @@ export function defaultResponseInterceptor(
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Resolve all other requests waiting for this response
|
// Resolve all other requests waiting for this response
|
||||||
axios.waiting[response.id]?.resolve(newCache.data);
|
const waiting = axios.waiting[response.id];
|
||||||
|
if (waiting) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
waiting.resolve(newCache.data);
|
||||||
delete axios.waiting[response.id];
|
delete axios.waiting[response.id];
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Found waiting deferred(s) and resolved them'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Define this key as cache on the storage
|
// Define this key as cache on the storage
|
||||||
await axios.storage.set(response.id, newCache);
|
await axios.storage.set(response.id, newCache);
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
id: response.id,
|
||||||
|
msg: 'Response cached',
|
||||||
|
data: { cache: newCache, response }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Return the response with cached as false, because it was not cached at all
|
// Return the response with cached as false, because it was not cached at all
|
||||||
return response;
|
return response;
|
||||||
};
|
};
|
||||||
@ -138,6 +208,13 @@ export function defaultResponseInterceptor(
|
|||||||
const config = error['config'] as CacheRequestConfig;
|
const config = error['config'] as CacheRequestConfig;
|
||||||
|
|
||||||
if (!config || config.cache === false || !config.id) {
|
if (!config || config.cache === false || !config.id) {
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'Web request returned an error but cache handling is not enabled',
|
||||||
|
data: { error, config }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,6 +227,14 @@ export function defaultResponseInterceptor(
|
|||||||
cache.previous !== 'stale'
|
cache.previous !== 'stale'
|
||||||
) {
|
) {
|
||||||
await rejectResponse(config.id);
|
await rejectResponse(config.id);
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'Caught an error in the request interceptor',
|
||||||
|
data: { error, config }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -163,6 +248,13 @@ export function defaultResponseInterceptor(
|
|||||||
)
|
)
|
||||||
: cacheConfig.staleIfError;
|
: cacheConfig.staleIfError;
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'Found cache if stale config for rejected response',
|
||||||
|
data: { error, config, staleIfError }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
staleIfError === true ||
|
staleIfError === true ||
|
||||||
// staleIfError is the number of seconds that stale is allowed to be used
|
// staleIfError is the number of seconds that stale is allowed to be used
|
||||||
@ -179,6 +271,13 @@ export function defaultResponseInterceptor(
|
|||||||
data: cache.data
|
data: cache.data
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'staleIfError resolved this response with cached data',
|
||||||
|
data: { error, config, cache }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
cached: true,
|
cached: true,
|
||||||
config,
|
config,
|
||||||
@ -191,6 +290,13 @@ export function defaultResponseInterceptor(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (__ACI_DEV__) {
|
||||||
|
axios.debug?.({
|
||||||
|
msg: 'Received an unknown error that could not be handled',
|
||||||
|
data: { error, config }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
throw error;
|
throw error;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user