vue.js 终止请求和请求超时的方法
当前端请求发送并且响应未完成时，终止请求，不再返回数据1、Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。示例：<body><div id="app"><button @click="getMsg" c
·
当前端请求发送并且响应未完成时，终止请求，不再返回数据
1、Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。示例：
<body>
<div id="app">
<button @click="getMsg" class="get-msg">获取数据</button>
<button @click="cancelGetMsg" class="cancel">取消获取</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
cancel: null // 这里要先初始化
},
methods: {
getMsg () {
let CancelToken = axios.CancelToken
let self = this
axios.get('http://xxx.com/index/index', {
cancelToken: new CancelToken(c => {
this.cancel = c
console.log(c)
// 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
})
}).then(res => {})
.catch(err => {})
},
cancelGetMsg () {
this.cancel() // 终止请求
}
}
})
</script>
</body>
当前端请求发送并且响应未完成时，用时太长，终止请求，不再返回数据
2、请求超时的设置。示例：
axios.get('http://xxx.com/index/index', {
timeout: 300000 //这里来设置请求超时的时间
})
}).then(res => {})
.catch(err => {
console.log('数据请求超时')
})
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)