vue axios请求频繁时取消上一次请求 (及请求拦截 响应拦截))
<script>import axios from 'axios'import qs from 'qs'export default {methods: {request(keyword) {var CancelToken = axios.CancelToken...
·
方法一 取消上一次请求 cancelRequest();
<script>
import axios from 'axios'
import qs from 'qs'
export default {
methods: {
request(keyword) {
var CancelToken = axios.CancelToken
var source = CancelToken.source()
// 取消上一次请求
this.cancelRequest();
axios.post(url, qs.stringify({kw:keyword}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
cancelToken: new axios.CancelToken(function executor(c) {
that.source = c;
})
}).then((res) => {
// 在这里处理得到的数据
...
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message); //请求如果被取消,这里是返回取消的message
} else {
//handle error
console.log(err);
}
})
},
cancelRequest(){
if(typeof this.source ==='function'){
this.source('终止请求') 这样就可以成功取消上一次请求啦!真的非常好用~
}
},
}
}
</script>
请求拦截(配置发送请求的信息)
// 请求拦截(配置发送请求的信息)
// 请求拦截 为每一次请求添加token(配置发送请求的信息)
axios.interceptors.request.use(function (config){
// 处理请求之前的配置
config.headers.Authorization=window.sessionStorage.getItem('token')
return config;
}, function (error){
// 请求失败的处理
return Promise.reject(error);
});
响应拦截(配置请求回来的信息)
// 响应拦截(配置请求回来的信息)
axios.interceptors.response.use(function (response){
// 处理响应数据
return response;
}, function (error){
// 处理响应失败
return Promise.reject(error);
});
Vue.prototype. h t t p = a x i o s / / 其 他 页 面 在 使 用 a x i o s 的 时 候 直 接 t h i s . http = axios //其他页面在使用axios的时候直接 this. http=axios//其他页面在使用axios的时候直接this.http就可以了
方法二
data() {
return {
timer:''
}
}
//请求方法调用之前 取消上次的请求 也可达到目的
clearTimeout(that.timer)
that.timer=setTimeout(function(){
Indicator.open()
that.httpServe.request(API.openAgreePay,'post',{
},800)
更多推荐
已为社区贡献6条内容
所有评论(0)