Axios取消请求ajax请求

应用场景

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

以前的方案

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