在vue中axios设置timeout超时的操作
在做vue项目的时候,由于数据量查询比较大,所以前台调用接口数据的时候,往往要等很久,所以需要设置个超时,当超过设置时间就让向页面返回一个状态,让使用者不用一直等。
通过官网api查询,对其超时讲解不是很多,但其和Jquery中请求非常类似
Jquery请求方式
$.ajax({ url:'接口地址', type:'get',//请求方式get或post data:{},//请求所传的参数 dataType:'json',//返回的数据格式 timeout:4000,//设置时间超时,单位毫秒 success:function(result){ console.log('OK') }, error:console.log('error') })
vue中请求方式:
axios.post(//请求方式 url,//接口地址 params,//传递参数 {timeout:1000*60*2})//设置超时,单位毫秒 .then(function(res){ console.log(res); }).catch((error)=>{ console.log('error') })
所以可以再请求中通过timeout设置请求超时
补充知识:vue中用axios请求接口,处理网络失败和网络超时问题,axios拦截器
前端经常要对服务器的错误信息做处理,小编是头一次做,就遇到了很多问题
首先,是封装的请求数据的方法
importVuefrom'vue'; importaxiosfrom'axios'; importqsfrom'qs'; importwxfrom'weixin-js-sdk'; import{ Toast }from'mint-ui'; axios.defaults.timeout=10000; //拦截 axios.interceptors.request.use(function(config){ returnconfig },function(error){ returnPromise.reject(error); }) axios.interceptors.response.use( response=>{ if(typeof(response)!='String'&&response.data.errno!==0&&response.config.url.indexOf('searchorderoyidornumber')<0&&response.config.url.indexOf('upload')<0){ response.data['data']=response.data['data']||{}; Toast(response.data.errmsg) } if(typeof(response)!='String'&&response.data.errno==3521){ localStorage.clear(); location.href='#/login' } returnresponse.status==200?response.data:response; //returnresponse }, error=>{ //String(error).toLowerCase().indexOf('timeout') if(error&&error.stack.indexOf('timeout')>-1){ Toast('请求超时') } //letconfig=error.config; //if(!config||!config.retry)returnPromise.reject(err); //config.__retryCount=config.__retryCount||0; ////Checkifwe'vemaxedoutthetotalnumberofretries //if(config.__retryCount>=config.retry){ ////Rejectwiththeerror //returnPromise.reject(err); //} ////Increasetheretrycount //config.__retryCount+=1; ////Createnewpromisetohandleexponentialbackoff //varbackoff=newPromise(function(resolve){ //setTimeout(function(){ //resolve(); //},config.retryDelay||1); //}); ////Returnthepromiseinwhichrecallsaxiostoretrytherequest //returnbackoff.then(function(){ //returnaxios(config); //}); } ); letaxios_post=function(url,params){ returnnewPromise((resolve,reject)=>{ if(!localStorage.getItem('token')||localStorage.getItem('token')==''){ axios.get('/gettoken').then((res)=>{ localStorage.setItem('token',res.data.token) axios.post(url,qs.stringify(params), { headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }).then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) }).catch(err=>{ reject(err) }) }else{ params=url.indexOf('login')>-1?{ ...params, _token:localStorage.getItem('token') }:{ ...params, _token:localStorage.getItem('token'), S:localStorage.getItem('S'), U:localStorage.getItem('U') } letoptions={}; options['maxContentLength']=1024000000; if(url.indexOf('uplpoad')>-1){ options['timeout']=1000*30; } axios.post(url,params,options).then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) } }) } letaxios_get=function(url,params){ let_params=typeof(params)=='object'?params:{} _params={ ..._params, S:localStorage.getItem('S'), U:localStorage.getItem('U') } returnnewPromise((resolve,reject)=>{ axios.get(url,{ 'params':_params }).then(res=>{ if(res.errno!==0){ reject(res) } resolve(res) }).catch(err=>{ reject(err) }) }) } letgetCookie=function(cookieName){ varcookieValue=""; if(document.cookie&&document.cookie!=''){ varcookies=decodeURIComponent(document.cookie).split(';'); for(vari=0;i在组件中直接this.$post()这样用即可。
以上这篇在vue中axios设置timeout超时的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。