mirror of
https://github.com/arthurfiorette/axios-cache-interceptor.git
synced 2025-12-08 17:36:16 +00:00
docs: added info about global axios usage
This commit is contained in:
parent
c32c452190
commit
53c4d4163e
72
README.md
72
README.md
@ -78,44 +78,44 @@ Axios Cache Interceptor</h1>
|
|||||||
<br />
|
<br />
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import axios from 'axios';
|
|
||||||
import { setupCache, SessionCacheStorage } from 'axios-cache-interceptor';
|
import { setupCache, SessionCacheStorage } from 'axios-cache-interceptor';
|
||||||
|
|
||||||
// An axios instance with modified types
|
// The default axios instance or your custom one
|
||||||
const api = setupCache(axios.create(), {
|
let axios;
|
||||||
|
|
||||||
|
// Apply the interceptor to the provided instance
|
||||||
|
setupCache(axios, {
|
||||||
/* options */
|
/* options */
|
||||||
});
|
});
|
||||||
|
|
||||||
// Make a simple request, with caching support, to the api
|
// Make a simple request, with caching support, to the api
|
||||||
const resp1 = await api.get('https://api.example.com/');
|
const resp1 = await axios.get('https://api.example.com/');
|
||||||
// resp1.cached = false
|
// resp1.cached = false
|
||||||
|
|
||||||
const resp2 = await api.get('https://api.example.com/');
|
const resp2 = await axios.get('https://api.example.com/');
|
||||||
// resp2.cached = true
|
// resp2.cached = true
|
||||||
```
|
```
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
## Table of contents
|
|
||||||
|
|
||||||
- [Table of contents](#table-of-contents)
|
|
||||||
- [Features](#features)
|
- [Features](#features)
|
||||||
- [Installing](#installing)
|
- [Installing](#installing)
|
||||||
- [Via NPM](#via-npm)
|
- [Via NPM](#via-npm)
|
||||||
- [Via CDN](#via-cdn)
|
- [Via CDN](#via-cdn)
|
||||||
- [Support list](#support-list)
|
- [Support List](#support-list)
|
||||||
- [Getting Started](#getting-started)
|
- [Getting Started](#getting-started)
|
||||||
|
- [Default Axios Instance](#default-axios-instance)
|
||||||
- [Compiled code](#compiled-code)
|
- [Compiled code](#compiled-code)
|
||||||
- [NodeJS](#nodejs)
|
- [NodeJS](#nodejs)
|
||||||
- [Browsers](#browsers)
|
- [Browsers](#browsers)
|
||||||
- [Typescript users](#typescript-users)
|
- [Typescript Users](#typescript-users)
|
||||||
- [Basic Knowledge](#basic-knowledge)
|
- [Basic Knowledge](#basic-knowledge)
|
||||||
- [Request id](#request-id)
|
- [Request id](#request-id)
|
||||||
- [Response object](#response-object)
|
- [Response object](#response-object)
|
||||||
- [response.cached](#responsecached)
|
- [response.cached](#responsecached)
|
||||||
- [response.id](#responseid)
|
- [response.id](#responseid)
|
||||||
- [Global configuration](#global-configuration)
|
- [Global Configuration](#global-configuration)
|
||||||
- [config.storage](#configstorage)
|
- [config.storage](#configstorage)
|
||||||
- [config.generateKey](#configgeneratekey)
|
- [config.generateKey](#configgeneratekey)
|
||||||
- [config.waiting](#configwaiting)
|
- [config.waiting](#configwaiting)
|
||||||
@ -204,7 +204,7 @@ const { setupCache } = window.AxiosCacheInterceptor;
|
|||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
## Support list
|
## Support List
|
||||||
|
|
||||||
Below you can check what version of this package is supported by your version of axios.
|
Below you can check what version of this package is supported by your version of axios.
|
||||||
But that does not mean that won't work with any version. **Most of "breaking changes" made
|
But that does not mean that won't work with any version. **Most of "breaking changes" made
|
||||||
@ -229,7 +229,7 @@ one.
|
|||||||
```js
|
```js
|
||||||
import { setupCache } from 'axios-cache-interceptor';
|
import { setupCache } from 'axios-cache-interceptor';
|
||||||
|
|
||||||
// Your axios instance
|
// Your axios instance (Can also be the global one)
|
||||||
let axios;
|
let axios;
|
||||||
|
|
||||||
// Return the same axios instance, but with a modified Typescript type.
|
// Return the same axios instance, but with a modified Typescript type.
|
||||||
@ -261,6 +261,48 @@ here: [Per-request configuration](#per-request-configuration).
|
|||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
|
## Default Axios Instance
|
||||||
|
|
||||||
|
Sometimes, by using other libraries, frameworks and etc, you may want or need to use the
|
||||||
|
global axios instance, (the one exported by default). That's no big deal, as the
|
||||||
|
`setupCache` function returns the same axios instance, you can just do that:
|
||||||
|
|
||||||
|
**_Attention! Using the global axios can break any other code that also uses the default
|
||||||
|
axios instance._**
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
import axios from 'axios';
|
||||||
|
import { setupCache } from 'axios-cache-interceptor';
|
||||||
|
|
||||||
|
setupCache(axios, {
|
||||||
|
/* options here */
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
// my-other-file.js
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
// caching is enabled!
|
||||||
|
axios.get('url');
|
||||||
|
```
|
||||||
|
|
||||||
|
But, you'll see that the typescript intellisense won't work, as the global axios instance
|
||||||
|
has the defaults axios typings. To fix that, you'll have to override the global axios
|
||||||
|
typings or force the type for every parameter:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import axios from 'axios';
|
||||||
|
import { AxiosCacheInstance } from 'axios-cache-interceptor';
|
||||||
|
|
||||||
|
const Axios = axios as AxiosCacheInstance;
|
||||||
|
|
||||||
|
axios.defaults.cache; // works!
|
||||||
|
```
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
## Compiled code
|
## Compiled code
|
||||||
|
|
||||||
### NodeJS
|
### NodeJS
|
||||||
@ -304,7 +346,7 @@ CommonsJS and more)
|
|||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
## Typescript users
|
## Typescript Users
|
||||||
|
|
||||||
This package does not pollute the global axios typings. Instead, the `setupCache` returns
|
This package does not pollute the global axios typings. Instead, the `setupCache` returns
|
||||||
the same axios instance but with **extended** typings.
|
the same axios instance but with **extended** typings.
|
||||||
@ -397,7 +439,7 @@ the internal code. Remember that, depending on the
|
|||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
## Global configuration
|
## Global Configuration
|
||||||
|
|
||||||
When applying the interceptor, you can customize some properties:
|
When applying the interceptor, you can customize some properties:
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user