组织一个基于axios的请求包。第一个是request.js。该文件用于处理axios的配置，设置拦截器等，创建一个实例，并导出这个实例。代码如下。importVuefrom'vue'importaxiosfrom'axios'//创建axios实例constservice=axios.create({baseURL:'/user',//baseURLtimeout:6000//请求超时时间})/***请求拦截器，携带每个请求的token（可选）*/service.interceptors.request.use(config=>{consttoken=Vue.ls.get("ACCESS_TOKEN")//放置tokenif(token){config.headers['X-Access-Token']=tokeninthestateinvuex//让每个请求携带一个自定义的token，请根据实际情况修改}if(config.method=='get'){config.params={_t:Date.parse(newDate())/1000,//让每个请求携带不同的时间参数，防止浏览器缓存发送请求...config.params}}returnconfig},(error)=>{returnPromise.reject(error)})/***响应拦截器中的错误处理*/consterr=(error)=>{if(error.response){switch(error.response.status){case401:console.log({message:'系统提示',description:'未授权，请重新登录',duration:4})breakcase403:console.log({message:'SystemPrompt',description:'AccessDenied'})breakcase404:console.log({message:'SystemPrompt',德description:'Sorry,theresourcewasnotfound!',duration:4})breakcase500:console.log({message:'SystemPrompt',description:'令牌无效，请重新登录！'})breakcase504：console.log({message:'Systemprompt',description:'Networktimeout'})breakdefault:console.log({message:'Systemprompt',description:error.response.data.message,})break}}returnPromise.reject(error)};/***响应拦截器，取出response中的token放入state*/service.interceptors.response.use((response)=>{consttoken=response.headers["authorization"]if(token){Vue.ls.set("ACCESS_TOKEN",token)//token放在vuex中的状态}returnresponse.data},err)export{serviceasaxios第二个首先是manage.js，这个文件主要是写不同的http请求，get，post等，在request中配置一些特殊的配置import{axios}from'./request'//getexportfunctiongetAction(url,params){returnaxios({url:url,method:'get',params:params})}//postexport函数postAction(url,data){returnaxios({url:url,method:'post',data:data})}//putexport函数putAction(url,data){returnaxios({url:url,method:'put',data:data})}//deleteActionexportfunctiondeleteAction(url,params){returnaxios({url:url,method:'delete',params:params})}/***下载文件*@param{*}url:请求地址*@param{*}params:请求参数*/exportfunctiondownFileAction(url,params){returnaxios({url:url,params:params,method:'get',responseType:'blob'})}/***用于上传文件*@param{*}url:请求地址*@param{*}data:请求正文数据*/exportfunctionfileUploadAction(url,data){returnaxios({url:url,data:data,method:'post',headers:{'Content-Type':'multipart/form-data'},timeout:1000*60*4//上传时间4分钟})}最后的api.js文件是我们把需要写的接口写在一个文件里，也是为了方便我们维护。使用时导入即可使用。import{getAction,deleteAction,putAction,postAction,downFileAction,fileUploadAction}from'@/api/manage'constgetTest=(params)=>getAction("/api/user/get",params);constdeleteActionTest=(params)=>deleteAction("/api/user/delete",params);constputActionTest=(params)=>putAction("/api/user/put",params);constpostActionTest=(参数s)=>postAction("/api/user/post",params);constdownFileActionTest=(params)=>downFileAction("/api/user/downfile",params);constfileUploadActionTest=(params)=>fileUploadAction("/api/user/fileupload",params);export{getTest,deleteActionTest,putActionTest,postActionTest,downFileActionTest,fileUploadActionTest}自带一个项目中使用的文件下载链接过程axios.get("/api/excel",{id:'001'}).then(res=>{//返回的数据是二进制文件流varblob=newBlob([res],{type:'application/force-download;charset=utf-8'});vardownloadElement=document.createElement('a');varhref=window.URL.createObjectURL(blob);//创建下载链接downloadElement.href=href;downloadElement.download='name.xls';//DownloadAfterfilenamedocument.body.appendChild(downloadElement);downloadElement.click();//点击下载document.body.removeChild(downloadElement);//下载完成后移除元素window.URL.revokeObjectURL(href);//释放掉落的blob对象})
