docs: added info about global axios usage

This commit is contained in:
arthurfiorette 2021-12-31 10:05:34 -03:00
parent c32c452190
commit 53c4d4163e
No known key found for this signature in database
GPG Key ID: 9D190CD53C53C555

View File

@ -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: