archive-gh-me/axios-cache-interceptor
1
0
Fork 0
mirror of https://github.com/arthurfiorette/axios-cache-interceptor.git synced 2026-02-01 14:32:40 +00:00
Code Issues Projects Releases Wiki Activity
axios-cache-interceptor/assets/guide_getting-started.md.X7rsi6EE.js
arthurfiorette e9d6469564 Deploy docs for latest
2025-10-14 14:22:39 +00:00

55 lines
31 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as i,c as a,o as t,ag as h}from"./chunks/framework.CnuuF8_c.js";const g=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1760451679000}'),n={name:"guide/getting-started.md"};function k(e,s,l,p,r,d){return t(),a("div",null,s[0]||(s[0]=[h(`<div style="display:none;" hidden="true" aria-hidden="true">Are you an LLM? You can read better optimized documentation at /guide/getting-started.md for this page in Markdown format</div><h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><p><a href="https://axios-cache-interceptor.js.org/v0/" target="_blank" rel="noreferrer">Looking for axios v0?</a></p><h2 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to &quot;Install&quot;">​</a></h2><p>Add Axios Cache Interceptor and Axios to your project using your favorite package manager:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-9qR7Q" id="tab-09TeiJP" checked><label data-title="NPM" for="tab-09TeiJP">NPM</label><input type="radio" name="group-9qR7Q" id="tab-1i_y4Kg"><label data-title="Browser" for="tab-1i_y4Kg">Browser</label><input type="radio" name="group-9qR7Q" id="tab-7ZIVxYF"><label data-title="Skypack" for="tab-7ZIVxYF">Skypack</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7AA89F;--shiki-light:#597B75;">npm</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> install</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> axios@^1</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> axios-cache-interceptor@^1</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#727169;--shiki-light:#716E61;">&lt;!-- Development UMD build for ES2017+ (~14.2 KiB) --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&lt;</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">script</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> src</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">=</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&quot;https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js&quot;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&gt;&lt;/</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">script</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#727169;--shiki-light:#716E61;">&lt;!-- Production UMD build for ES5+ (~16.4 KiB) --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&lt;</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">script</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> src</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">=</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&quot;https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js&quot;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&gt;&lt;/</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">script</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">Axios</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;https://cdn.skypack.dev/axios&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">{</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> }</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;https://cdn.skypack.dev/axios-cache-interceptor&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span></code></pre></div></div></div><h2 id="setup" tabindex="-1">Setup <a class="header-anchor" href="#setup" aria-label="Permalink to &quot;Setup&quot;">​</a></h2><p>After installing, you can import the package and apply the interceptor to your axios instance, as shown below:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-UU_O7" id="tab-0Ofaclx" checked><label data-title="EcmaScript" for="tab-0Ofaclx">EcmaScript</label><input type="radio" name="group-UU_O7" id="tab-lfZQcUW"><label data-title="CommonJS" for="tab-lfZQcUW">CommonJS</label><input type="radio" name="group-UU_O7" id="tab-e71hRpF"><label data-title="Browser" for="tab-e71hRpF">Browser</label><input type="radio" name="group-UU_O7" id="tab-UPymFsQ"><label data-title="Skypack" for="tab-UPymFsQ">Skypack</label></div><div class="blocks"><div class="language-ts vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus has-focused-lines vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">Axios</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;axios&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">{</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> }</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;axios-cache-interceptor&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> instance </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">create</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">();</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">instance</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req1 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> [</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#957FB8;--shiki-dark-font-weight:bold;--shiki-light:#624C83;--shiki-light-font-weight:bold;"> await</span><span style="--shiki-dark:#7AA89F;--shiki-light:#597B75;"> Promise</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">all</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">([</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">req1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // false</span></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // true</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus has-focused-lines vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> require</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;axios&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> {</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> setupCache </span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">}</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> require</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;axios-cache-interceptor&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> instance </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">create</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">();</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">instance</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req1 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> [</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#957FB8;--shiki-dark-font-weight:bold;--shiki-light:#624C83;--shiki-light-font-weight:bold;"> await</span><span style="--shiki-dark:#7AA89F;--shiki-light:#597B75;"> Promise</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">all</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">([</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">req1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // false</span></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // true</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus has-focused-lines vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> window</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> {</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> setupCache </span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">}</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> window</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">AxiosCacheInterceptor</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> instance </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">create</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">();</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">instance</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req1 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> [</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#957FB8;--shiki-dark-font-weight:bold;--shiki-light:#624C83;--shiki-light-font-weight:bold;"> await</span><span style="--shiki-dark:#7AA89F;--shiki-light:#597B75;"> Promise</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">all</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">([</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">req1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // false</span></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // true</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes kanagawa-wave kanagawa-lotus has-focused-lines vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">Axios</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;https://cdn.skypack.dev/axios&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"><span style="--shiki-dark:#FFA066;--shiki-light:#CC6D00;">import </span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">{</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> }</span><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;"> from</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;"> &#39;https://cdn.skypack.dev/axios-cache-interceptor&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> instance </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> Axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">create</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">();</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;"> setupCache</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">instance</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req1 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line has-focus"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2 </span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">=</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> axios</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">get</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">(</span><span style="--shiki-dark:#98BB6C;--shiki-light:#6F894E;">&#39;https://api.example.com/&#39;</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#957FB8;--shiki-light:#624C83;">const</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;"> [</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;"> =</span><span style="--shiki-dark:#957FB8;--shiki-dark-font-weight:bold;--shiki-light:#624C83;--shiki-light-font-weight:bold;"> await</span><span style="--shiki-dark:#7AA89F;--shiki-light:#597B75;"> Promise</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#7E9CD8;--shiki-light:#4D699B;">all</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">([</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">req1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">,</span><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;"> req2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">]);</span></span>
<span class="line"></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res1</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // false</span></span>
<span class="line has-focus"><span style="--shiki-dark:#DCD7BA;--shiki-light:#545464;">res2</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">.</span><span style="--shiki-dark:#E6C384;--shiki-light:#77713F;">cached</span><span style="--shiki-dark:#9CABCA;--shiki-light:#4E8CA2;">;</span><span style="--shiki-dark:#727169;--shiki-light:#716E61;"> // true</span></span></code></pre></div></div></div><p>Just the above is sufficient for most use cases. However, you can also customize each cache behavior by passing a configuration object to the <code>setupCache</code> function. And you can also customize some behaviors each request by using the <code>cache</code> option in the request config.</p><h2 id="support-table" tabindex="-1">Support Table <a class="header-anchor" href="#support-table" aria-label="Permalink to &quot;Support Table&quot;">​</a></h2><p>Most of axios v0 breaking changes were about typing issues, so your version may work with one outside of this table. <strong>Axios and Axios Cache Interceptor v0 are not compatible with Axios and Axios Cache Interceptor v1</strong></p><blockquote><p><strong>Note</strong>: Axios was not defined as a <code>peerDependency</code> for all v0 versions, because it had a non-stable semver version. <a href="https://github.com/arthurfiorette/axios-cache-interceptor/issues/145#issuecomment-1042710481" target="_blank" rel="noreferrer">See #145 (Comment)</a></p></blockquote><table tabindex="0"><thead><tr><th><a href="https://github.com/axios/axios/releases" target="_blank" rel="noreferrer">Axios</a></th><th><a href="https://github.com/arthurfiorette/axios-cache-interceptor/releases" target="_blank" rel="noreferrer">Axios Cache Interceptor</a></th></tr></thead><tbody><tr><td><code>&gt;= v1.7.8</code></td><td><code>&gt;= v1.7.0</code></td></tr><tr><td><code>&gt;= v1.6</code></td><td><code>&gt;= v1.3.0 &amp;&amp; &lt;= 1.6.2</code></td></tr><tr><td><code>&gt;= v1.4</code></td><td><code>&gt;= v1.2.0</code></td></tr><tr><td><code>&gt;= v1.3.1</code></td><td><code>&gt;= v1</code></td></tr><tr><td><code>&gt;= v0.27</code></td><td><code>&gt;= v0.10.3</code></td></tr><tr><td><code>&gt;= v0.26</code></td><td><code>&gt;= v0.8.4</code></td></tr><tr><td><code>~ v0.25</code></td><td><code>~ v0.8.4</code></td></tr><tr><td><code>~ v0.24</code></td><td><code>&gt;= v0.5 &amp;&amp; &lt;= 0.8.3</code></td></tr><tr><td><code>~ v0.23</code></td><td><code>~ v0.4</code></td></tr><tr><td><code>~ v0.22</code></td><td><code>~ v0.3</code></td></tr><tr><td><code>v0.21</code></td><td><code>&lt;= v0.2</code></td></tr></tbody></table><h3 id="read-more" tabindex="-1">Read More <a class="header-anchor" href="#read-more" aria-label="Permalink to &quot;Read More&quot;">​</a></h3><p>Some useful links to get you more familiar with the library:</p><ul><li><a href="./debugging">Debugging requests</a></li><li><a href="./storages">Storages</a></li><li><a href="./../config">Global config</a></li><li><a href="./../config/request-specifics">Per request config</a></li><li><a href="./../config/response-object">Response object</a></li></ul>`,17)]))}const o=i(n,[["render",k]]);export{g as __pageData,o as default};
Reference in New Issue View Git Blame Copy Permalink