var c=Object.defineProperty;var m=(e,t,a)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a;var l=(e,t,a)=>(m(e,typeof t!="symbol"?t+"":t,a),a);import{a as h}from"./axios-760d4776.js";import{x as d,U as y,f as g,p as C,P as R,B as q,X as F,A as f}from"./naive-ui-6a867b5b.js";import{h as D,H as w,k as v,O as E,ad as u,e as i}from"./@vue-5ea710d1.js";import"./date-fns-43132c58.js";import"./vueuc-ab337559.js";import"./evtd-b614532e.js";import"./seemly-dc6f1e91.js";import"./@css-render-3e4116d4.js";import"./vooks-30ff42a2.js";import"./vdirs-b0483831.js";import"./@juggle-41516555.js";import"./css-render-d3958e6a.js";import"./@emotion-8a8e73f6.js";import"./lodash-es-de060e62.js";import"./treemate-25c27bff.js";import"./date-fns-tz-9041c6f6.js";import"./async-validator-dee29e8b.js";class N{constructor(){l(this,"pendingRequest");this.pendingRequest=new Map}generateRequestKey(t){const{method:a,url:s}=t;return[s||"",a||"",JSON.stringify(t.params),JSON.stringify(t.data)].join("&")}addPendingRequest(t){const a=this.generateRequestKey(t);if(this.pendingRequest.has(a))t.signal=this.pendingRequest.get(a).signal;else{const s=new AbortController;t.signal=s.signal,this.pendingRequest.set(a,s)}}removePendingRequest(t){const a=this.generateRequestKey(t);this.pendingRequest.has(a)&&(this.pendingRequest.get(a).abort(),this.pendingRequest.delete(a))}}const b={baseURL:"",withCredentials:!1,timeout:5*1e3,headers:{"Content-Type":"application/json"}},A=(e,t)=>{const a=e.headers;t.forEach(s=>{a[s.key]=s.value})},n=new N,r=h.create(b);r.interceptors.request.use(e=>(A(e,[{key:"X-TOKEN",value:"token"}]),n.removePendingRequest(e),n.addPendingRequest(e),e),e=>Promise.reject(e));r.interceptors.response.use(e=>{n.removePendingRequest(e.config);const{data:t}=e;return Promise.resolve(t)},e=>(n.removePendingRequest(e.config||{}),Promise.reject(e)));const p=async e=>r({url:`https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${e}`}),$=D({name:"RAxios",setup(){const e=w({weatherData:[],inputCityValue:""}),t=[{title:"空气指数",key:"air"},{title:"风速",key:"win_meter"},{title:"能见度",key:"visibility"},{title:"天气情况",key:"wea_day"},{title:"提示",key:"air_tips"}],a=async s=>{try{const o=await p(s);e.weatherData=o.data}catch{window.$message.error("请求已被取消")}};return v(async()=>{const s=await p("成都");e.weatherData=s.data}),{...E(e),columns:t,handleInputCityValue:a}},render(){return u(f,null,{default:()=>[u(d,{bordered:!0},{default:()=>[u(y,{title:"请求函数"},{default:()=>[i("基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题"),u("p",null,[i("打开控制台 => 网络 => 使用低速3g网络 => 查看控制台被取消的请求")])]})]}),u(d,{bordered:!0},{default:()=>[u(g,{class:"axios-header__btn",align:"center"},{default:()=>[u(C,{value:this.inputCityValue,"onUpdate:value":e=>this.inputCityValue=e,onInput:this.handleInputCityValue.bind(this),placeholder:"请输入城市"},null),u(R,{onClick:this.handleInputCityValue.bind(this,"")},{default:()=>[i("搜索")]})]})]}),u(q,null,{default:()=>[u(F,{data:this.weatherData,columns:this.columns},null)]})]})}});export{$ as default};