其他分享
首页 > 其他分享> > 取消axios请求

取消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() 方法

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