手摸手教你：vue+axios如何中断请求

📌文档原址

取消请求 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

代码思路

直接在api归纳文件中传入cancelToken，在页面调用source.cancel('取消请求')

代码

api归纳文件

// xdm肯定对这种的代码不陌生就不过多解释了
export function getProductList(query, cancelToken) {
  return request({
    url: '/product/list',
    method: 'get',
    params: query,
    cancelToken
  })
}

页面

import axios from 'axios'

data(){
  return{
    source:null
  }
}

methods: {
  getlist(){
    const source = axios.CancelToken.source()
    this.source = source
    getProductList(data, source.token){
      ......
    }
  },
  handleCancel(){
    this.source.cancel('取消请求')
  }
}

最后会在响应拦截中做出反应

service.interceptors.response.use(err => { console.log('err:'+ err.message) })