取消axios请求

取消axios请求

大量数据批量处理时，显示加载百分比
渲染部分数据方法，解决表格有大量数据又需要显示在一页进行批量操作时的卡顿问题

---

---

前言

在搜索表格数据时，可能会短时间内查询两遍，当第一个请求比第二个慢的时候，最后会显示出第一次查询的内容，而显然我们想要的是第二次查询的结果，所有应该在查询第二次时，把第一次的请求取消掉
查询资料发现可以使用 cancel token 来取消请求

---

一、可以利用CancelToken工厂函数创建cancel token

这种方法在我们封装好的的api中不方便使用。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// get 方法使用案例
axios.get('user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message)
  } else {
    // TODO: handle error
  }
})
// post 使用案例
axios.post('/user/12345', {
  name: 'name what'
}, {
  cancelToken: source.token
})

// 执行取消请求操作
source.cancel(‘请求已取消’)

二、传递executor函数到CancelToken的构造函数来创建cancel token

这种方法更方便，通用

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c
  })
})

// 执行取消请求操作
cancel()

三、按第二个方法来取消请求的方式

封装api时，将axios引入，利用executor生成了取消函数，并通过第三个参数 _this 赋值给外部请求传入的环境中

import servise from '@/router/axios'
import axios from 'axios'

const CancelToken= axios.CancelToken

export const getTableList = (url,params, _this) => {
  return servise({
    url,
    method: 'get',
    params,
    cancelToken: new CancelToken(function executor(c) {
      _this.cancelAjax = c
    })
  })
}

外部请求api时，在data中设置一个变量cancelAjax为空用来存储上面生成的取消函数，并在发送请求时将this作为第三个参数传到封装好的api上，

	//在每次发送请求时，通过判断cancelAjax的类型确定当前是否有请求在响应中，如果有就中断前一个请求。
	if (typeof this.cancelAjax === 'function') {
        this.cancelAjax()
      }
      //传入this，在封装api的环境中去获得取消函数
      getTableList(this.tableUrl,params,this).then(res => {
        if (res.code === 200) {
        }
      })

---

总结

提示一句，取消axios的请求，CancelToken函数实际用的是XMLHttpRequest.abort() 方法