在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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。