vue中的axios请求超时处理
在做数据源连接测试时,用axios请求时发现数据库连接超时,前台也没有响应。在此就加了拦截器:import {serialize} from '@/util/util'import {getStore} from '../util/store'import NProgress from 'nprogress' // progress barimport errorCode from '@...
·
在做数据源连接测试时,用axios请求时发现数据库连接超时,前台也没有响应。
在此就加了拦截器:
import {serialize} from '@/util/util'
import {getStore} from '../util/store'
import NProgress from 'nprogress' // progress bar
import errorCode from '@/const/errorCode'
import router from "@/router/router"
import {Message} from 'element-ui'
import 'nprogress/nprogress.css'
import store from "@/store"; // progress bar style
axios.defaults.timeout = 30000
// 返回其他状态吗
axios.defaults.validateStatus = function (status) {
return status >= 200 && status <= 500 // 默认的
}
// 跨域请求,允许保存cookie
axios.defaults.withCredentials = true
// NProgress Configuration
NProgress.configure({
showSpinner: false
})
// HTTPrequest拦截
axios.interceptors.request.use(config => {
NProgress.start() // start progress bar
const isToken = (config.headers || {}).isToken === false
let token = store.getters.access_token
if (token) {
config.headers['token'] = token // token
}
// headers中配置serialize为true开启序列化
if (config.methods === 'post' && config.headers.serialize) {
config.data = serialize(config.data)
delete config.data.serialize
}
return config
}, error => {
return Promise.reject(error)
})
// HTTPresponse拦截
***axios.interceptors.response.use(res => {***
NProgress.done()
const status = Number(res.status) || 200
const message = res.data.msg || errorCode[status] || errorCode['default']
if (status == 200 && res.data.code == 401) {
store.dispatch('FedLogOut').then(() => {
router.push({path: '/login'})
window.open('/', '_self')
})
return;
}
if (status === 401) {
store.dispatch('FedLogOut').then(() => {
router.push({path: '/login'})
window.open('/', '_self')
})
return
}
if (status !== 200 || res.data.code === 1) {
Message({
message: message,
type: 'error'
})
return Promise.reject(new Error(message))
}
return res
}, error => {
***if(error.message.includes('timeout')){ // 判断请求异常信息中是否含有超时timeout字符串
console.log("错误回调", error);
return Promise.reject(new Error(error)); // reject这个错误信息
}***
NProgress.done()
return Promise.reject(new Error(error))
})
export default axios
**内部分为重点部分,目的是获取错误信息里是否包含‘timeout’字符串。
页面发送后台请求:
timeot为请求超时响应时间
testDataSource(){//测试数据源
request({
url: '/api/dataSource/testDataSource',
method: 'post',
data: this.addForm,
timeout:5000
}).then(response =>{
if(response.data.code== 0 ){
this.$alert(response.data.msg, '', {
confirmButtonText: '确定'
});
}else{
this.$alert(response.data.msg, '连接失败', {
confirmButtonText: '确定'
});
}
}).***catch(error => {
if(error.message.includes('timeout')){
this.$alert(error.message, '连接失败', {
confirmButtonText: '确定',
});***
}
})
},
catch代码块中为捕获异常信息,也是可以捕获超时信息,捕获后判断错误信息是否包含timeout字符串。然后做出提示或者调用其他方法都可以。
更多推荐
已为社区贡献1条内容
所有评论(0)