Axios取消请求ajax请求

应用场景

用户需要快速请求,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了快速切换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) } )

以前的方案

把操作按钮冻结,不给操作,但使用体验偶尔会很糟糕