标签：axios 请求 取消 token cancel CancelToken

取消axios请求

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

---

文章目录

• 取消axios请求
• 前言
• 一、可以利用CancelToken工厂函数创建cancel token
• 二、传递executor函数到CancelToken的构造函数来创建cancel token
• 三、按第二个方法来取消请求的方式
• 总结

---

前言

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

标签：axios,请求,取消,token,cancel,CancelToken
来源： https://blog.csdn.net/qq_47122636/article/details/122721389

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。