Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
fanfan
/
front-jenkins
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Puu: e5fe0a1ab3
Branchit Tagit
front-jenkins
/
dist
/
assets
/
cache-DvZ_gmU7.js

cache-DvZ_gmU7.js 6.3 KB
Historia Raaka

1 
  1. import{g as C}from"./mock-api-CoC33yjK.js";import{P as y}from"./index-C0mnMlct.js";import{bg as r,B as o,W as d,aO as h,E as D,f as k}from"./antd-BfqWtMX3.js";import{u as E,c as K}from"./index-PbVC8mB0.js";import{d as c,k as u,f as i,G as l,u as F,F as p}from"./vue-DM5HGU8Z.js";import"./entry/index-CRWhxBeP.js";import"./useContentViewHeight-D9So7_ch.js";import"./useWindowSizeFn-CEueHQop.js";import"./onMountedOrActivated-Ckq_czNf.js";const B=c({props:{cacheKey:{type:String,default:"cacheKey-demo"}},setup(e){const{loading:a,data:t}=E(C,{cacheKey:e.cacheKey});return()=>{var n,s;return u(p,null,[u("p",null,[l("Background loading: "),a.value?"true":"false"]),u("p",null,[l("Latest request time: "),(n=F(t))==null?void 0:n.time]),u("p",null,[(s=F(t))==null?void 0:s.data])])}}}),P=c({setup(){const e=i(!1),a=t=>{e.value=!e.value};return()=>u(d,{title:"SWR"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("下面的示例，我们设置了"),u(r.Text,{type:"danger"},{default:()=>[l(" cacheKey ")]}),l("，在组件第二次加载时，会优先返回缓存的内容，然后在背后重新发起请求。你可以通过点击按钮来体验效果。")]})]}),u("div",{class:"mt-4"},[u(o,{type:"primary",onClick:()=>a()},{default:()=>[e.value?"hidden":"show"]}),e.value&&u(B,null,null)])]})}}),T=c({setup(){const{loading:e,data:a}=E(C,{cacheKey:"staleTime-demo",staleTime:5e3});return()=>{var t,n;return u(p,null,[u("p",null,[l("Background loading: "),e.value?"true":"false"]),u("p",null,[l("Latest request time: "),(t=F(a))==null?void 0:t.time]),u("p",null,[(n=F(a))==null?void 0:n.data])])}}}),q=c({setup(){const e=i(!1),a=t=>{e.value=!e.value};return()=>u(d,{title:"数据保持新鲜",class:"mt-2"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("通过设置"),u(r.Text,{type:"danger"},{default:()=>[l(" staleTime ")]}),l("，我们可以指定数据新鲜时间，在这个时间内，不会重新发起请求。下面的示例设置了 5s 的新鲜时间，你可以通过点击按钮来体验效果")]})]}),u("div",{class:"mt-4"},[u(o,{type:"primary",onClick:()=>a()},{default:()=>[e.value?"hidden":"show"]}),e.value&&u(T,null,null)])]})}}),g=c({setup(){const{loading:e,data:a,refresh:t}=E(C,{cacheKey:"cacheKey-share"});return()=>{var n,s;return u(p,null,[u("p",null,[l("Background loading: "),e.value?"true":"false"]),u(o,{type:"primary",onClick:t},{default:()=>[l("更新")]}),u("p",null,[l("Latest request time: "),(n=F(a))==null?void 0:n.time]),u("p",null,[(s=F(a))==null?void 0:s.data])])}}}),x=c({setup(){return()=>u(d,{title:"数据共享",class:"mt-2"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("同一个"),u(r.Text,{type:"danger"},{default:()=>[l(" cacheKey ")]}),l("的内容，在全局是共享的，这会带来以下几个特性")]}),u(r.Paragraph,null,{default:()=>[u("ul",null,[u("li",null,[l("请求 Promise 共享，相同的"),u(r.Text,{type:"danger"},{default:()=>[l(" cacheKey ")]}),l("同时只会有一个在发起请求，后发起的会共用同一个请求 Promise")]),u("li",null,[l("数据同步，任何时候，当我们改变其中某个 cacheKey 的内容时，其它相同"),u(r.Text,{type:"danger"},{default:()=>[l(" cacheKey ")]}),l("的内容均会同步")])])]})]}),u("div",{class:"mt-4"},[u("h2",null,[l("Article 1")]),u(g,null,null),u("h2",null,[l("Article 2")]),u(g,null,null)])]})}}),S=c({setup(){var m;const{loading:e,data:a,params:t,run:n}=E(C,{cacheKey:"cacheKey-share4"}),s=i(((m=t.value)==null?void 0:m[0])||"");return()=>{var A,f;return u(p,null,[u(h,null,{default:()=>[u(D,{value:s.value,"onUpdate:value":v=>s.value=v},null),u(o,{onClick:()=>n(s.value)},{default:()=>[l("Get")]})]}),u("p",null,[l("Background loading: "),e.value?"true":"false"]),u("p",null,[l("Latest request time: "),(A=F(a))==null?void 0:A.time]),u("p",null,[l("Latest request data: "),(f=F(a))==null?void 0:f.data]),u("p",null,[l("keyword: "),s.value])])}}}),w=c({setup(){const e=i(!1),a=t=>{e.value=!e.value};return()=>u(d,{title:"参数缓存",class:"mt-2"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("缓存的数据包括 data 和 params，通过 params 缓存机制，我们可以记忆上一次请求的条件，并在下次初始化")]})]}),u("div",{class:"mt-4"},[u(o,{type:"primary",onClick:()=>a()},{default:()=>[e.value?"hidden":"show"]}),u("div",{class:"mt-2"},[e.value&&u(S,null,null)])])]})}}),b=c({setup(){const e=i(!1),a=n=>{e.value=!e.value},t=n=>{K(n);const s=Array.isArray(n)?n.join("、"):n;k.success(`Clear ${s!=null?s:"All"} finished`)};return()=>u(d,{title:"删除缓存",class:"mt-2"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("useRequest 提供了一个 clearCache 方法，可以清除指定 cacheKey 的缓存数据。")]})]}),u("div",{class:"mt-4"},[u(h,null,{default:()=>[u(o,{type:"primary",onClick:()=>a()},{default:()=>[e.value?"hidden":"show"]}),u(o,{onClick:()=>t("Article1")},{default:()=>[l("Clear Article1")]}),u(o,{onClick:()=>t("Article2")},{default:()=>[l("Clear Article2")]}),u(o,{onClick:()=>t(["Article2","Article3"])},{default:()=>[l("Clear Article2 and Article3")]}),u(o,{onClick:()=>t()},{default:()=>[l("Clear All")]})]}),u("h2",null,[l("Article 1")]),e.value&&u(B,{cacheKey:"Article1"},null),u("h2",null,[l("Article 2")]),e.value&&u(B,{cacheKey:"Article2"},null),u("h2",null,[l("Article 3")]),e.value&&u(B,{cacheKey:"Article3"},null)])]})}}),L=c({setup(){const e="setCache-demo6",{loading:a,data:t}=E(C,{cacheKey:e,setCache:n=>localStorage.setItem(e,JSON.stringify(n)),getCache:()=>JSON.parse(localStorage.getItem(e)||"{}")});return()=>{var n,s;return u(p,null,[u("p",null,[l("Background loading: "),a.value?"true":"false"]),u("p",null,[l("Latest request time: "),(n=F(t))==null?void 0:n.time]),u("p",null,[(s=F(t))==null?void 0:s.data])])}}}),I=c({setup(){const e=i(!1),a=t=>{e.value=!e.value};return()=>u(d,{title:"自定义缓存",class:"mt-2"},{default:()=>[u(r,null,{default:()=>[u(r.Paragraph,null,{default:()=>[l("通过配置 setCache 和 getCache，可以自定义数据缓存，比如可以将数据存储到 localStorage、IndexDB 等。")]})]}),u("div",{class:"mt-4"},[u(o,{type:"primary",onClick:()=>a()},{default:()=>[e.value?"hidden":"show"]}),u("div",{class:"mt-2"},[e.value&&u(L,null,null)])])]})}}),$=c({setup(){return()=>u(y,null,{default:()=>[u(P,null,null),u(q,null,null),u(x,null,null),u(w,null,null),u(b,null,null),u(I,null,null)]})}});export{$ as default};
    2.