vue axios处理频繁请求
场景一：页面中存在多个按钮（A、B、C……按钮们都可以达到大致相同的目的，A点不动可以试试B，依次类推），每个按钮点击后都会触发请求，假设用户点击按钮A后迟迟未响应，于是很自然地点击按钮B，B收到响应结果后没多久A也收到了（A请求一直pending，从未中断），就会发现原本已经展示B结果的页面忽然闪了一下展示A的结果了，这一定不是我们想要的（早不来晚不来，现在别人给我答案了，你却来了）。
场景二：搜索框一般会有边输入边搜索的功能，在输入的每个阶段，都向后台发送http请求，我们不希望如此频繁，更不希望最后返回的不是用户想要的结果。
解决方法：在util.js中定义一个公用方法request()以及它需要调用的cancelRequest()：
util.js
import axios from 'axios'
const util = {
// axios请求频繁时取消上一次请求
request (url, params, handleSuc, handleErr) {
let that = this
// let CancelToken = axios.CancelToken
// let source = CancelToken.source()
// 取消上一次请求
this.cancelRequest()
axios.post(url, params, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
cancelToken: new axios.CancelToken(function executor (c) {
that.source = c
})
}).then((res) => {
handleSuc(res)
}).catch((err) => {
if (axios.isCancel(err)) {
// 请求如果被取消，这里是返回取消的message
// console.log('Rquest canceled', err.message)
} else {
handleErr(err)
}
})
},
cancelRequest () {
if (typeof this.source === 'function') {
this.source('终止请求')
}
}
}
export default util
main.js
import util from '@/util'
// 将util绑定到Vue的原型上
Vue.prototype.$util = util
调用方法：
this.$util.request(url, params, (res) => {
// 请求成功，执行代码
}, (err) => {
// 请求失败，执行代码
})
发表评论 (审核通过后显示评论)：