应用场景
用户需要快速请求
,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了- 快速切换tab等操作菜单后,如果前一次请求比后一次请求响应慢,数据就会对不上
Axios中的使用
/** index.js */
// 如果前一次请求还未响应,先取消
this.cancel && this.cancel('message')
this.$axios({
url,
method,
// 实例化一个Cancel对象
cancelToken: new this.$axios.CancelToken(c => {
// 把取消本次请求的函数赋值到这个组件的 data 中
this.cancel = c
})
})
/** main.js */
// axios 的全局配置
axios.interceptors.response.use(
res => res,
err => {
// 区别用户网络错误和 js 主动取消请求
!err.toString().includes('Cancel') && Vue.prototype.$message.error(`网络请求错误: ${err}`)
return Promise.reject(err)
}
)
以前的方案
- 把操作按钮冻结,不给操作,但使用体验偶尔会很糟糕