vue axios请求取消上一次请求 (及请求拦截 响应拦截))

可以使用axios提供的CancelToken来取消上一次请求。具体实现方式如下：

1. 在请求拦截器中创建一个CancelToken实例，并将其作为请求的cancelToken参数传递给axios请求。

import axios from 'axios'

const source = axios.CancelToken.source()

axios.interceptors.request.use(config => {
  config.cancelToken = source.token
  return config
})

2. 在组件中定义一个变量用于存储上一次请求的cancel函数。

export default {
  data() {
    return {
      cancelPrevRequest: null,
      // ...
    }
  },
  // ...
}

3. 发起请求时，先调用上一次请求的cancel函数取消之前的请求，然后再发送新的请求。

axios.get('/api/some-data', {
  cancelToken: new axios.CancelToken(cancel => {
    if (this.cancelPrevRequest) {
      this.cancelPrevRequest('取消上一次请求')
    }
    this.cancelPrevRequest = cancel
  })
}).then(response => {
  // ...
}).catch(error => {
  // ...
})

4. 在响应拦截器中，如果捕获到CancelToken的异常，说明该请求被取消了，可以不做任何处理。

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消了')
  } else {
    console.log('请求出错了')
  }
  return Promise.reject(error)
})

这样就可以实现在发送新的请求时自动取消上一次请求。