vue中断axios请求

vue手动中断axios请求

描述：在我们使用axios请求时，如果接口请求过慢，我们在发第二次请求时，成功，从接口获取到的值回显在页面上，此时第一次请求的接口如果成功会覆盖掉第一次的结果，所以我们要在发相同的接口时，中断掉上一次的接口
解决方案：
1.全局挂载一个$httpRequestList，初始值为空数组

Vue.$httpRequestList = [] // 在 main.js文件中挂载

2.请求拦截 中配置CancelToken

//http request拦截
axios.interceptors.request.use(
  config => {
    const meta = config.meta || {}
    const isToken = meta.isToken === false
    config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`

    // 添加断开请求的方法---------------------这里为重点-----------------------------
    config['cancelToken'] = new axios.CancelToken(function executor(cancel) {
      Vue.$httpRequestList.push(cancel) //存储cancle
    })

    //让每个请求携带token
    if (getToken() && !isToken) {
      config.headers[website.tokenHeader] = 'bearer ' + getToken()
    }
    //headers中配置text请求
    if (config.text === true) {
      config.headers['Content-Type'] = 'text/plain'
    }
    //headers中配置serialize为true开启序列化
    if (config.method === 'post' && meta.isSerialize === true) {
      config.data = serialize(config.data)
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

3.utils中定义全局方法, 在需要中断的时候调用

/**
   * 中断请求方法
   */
  clearHttpRequestingList() {
    // 判断是否有存储的cancle
    if (Vue.$httpRequestList.length > 0) {
      Vue.$httpRequestList.forEach(item => {
        // 给个标志，中断请求
        item('interrupt')
      })
      Vue.$httpRequestList = []
    }
  }

4.使用时调用方法

// 再次点击详情时中断之前的详情请求，防止数据被之前接口数据所覆盖·
   this.$utils.clearHttpRequestingList()