vue 切换tab之前取消已经发送的接口请求
切换tab太快,导致tab与请求数据显示不一致。因业务需求,仅对某个接口进行处理。
·
切换tab太快,导致tab与请求数据显示不一致。因业务需求,仅对某个接口进行处理。
1、api.js
import axios from 'axios'
getData: (data, that) => {
return request({
url: 'getData',
data,
method: 'get',
cancelToken: new axios.CancelToken(function executor(c) {
that.source = c;
})
})
},
2、request.js
export default function request({ url, data = {}, method = 'get', cancelToken }) {
return new Promise((resolve, reject) => {
const options = {
url,
method,
cancelToken,
}
if (method.toLowerCase() === 'get') {
options.params = data
}
else {
options.data = data
}
service(options).then(res => {
resolve(res.data)
})
.catch(error => {
reject()
console.error(error)
})
})
}
3、index.vue
发起请求前先阻断上一次的请求
export default {
data() {
return {
queryParams: {},
source: null,
};
},
methods: {
getData(){
this.cancelQuest();
this.$api.getData(this.queryParams, this).then((res) => {
})
},
cancelQuest() {
if (typeof this.source === 'function') {
this.source('您的操作过于频繁,请稍后重试!');
}
},
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)