axios CancelToken 取消频繁发送请求的用法和源码解析

前言做一个Vue的项目时,遇到频繁切换标签的问题。由于不同标签请求的ajax的结果所需时间不同,点击不同标签时,响应时间最慢的数据会覆盖之前响应的数据,显示数据跟所点击标签不对应。当时为了处理这个问题,没想到好方法,只好控制在点击下一个标签前,必须等前一个标签的结果回来之后进行。后来做API的统一管理时,看到前人写的axios的interceptor里有CancelToken这样一个东西,查了...
摘要由CSDN通过智能技术生成

前言

做一个Vue的项目时,遇到频繁切换标签的问题。由于不同标签请求的ajax的结果所需时间不同,点击不同标签时,响应时间最慢的数据会覆盖之前响应的数据,显示数据跟所点击标签不对应。当时为了处理这个问题,没想到好方法,只好控制在点击下一个标签前,必须等前一个标签的结果回来之后进行。

后来做API的统一管理时,看到前人写的axios的interceptor里有CancelToken这样一个东西,查了查资料,发现这个可以取消请求,踏破铁鞋无觅处,刚好可以用来处理之前遇到的频繁切换标签的问题。今作一记录,也好更好的理解这个功能。

述求

点击标签时,取消之前正在执行的请求,使得切换标签时,页面得到的是最后请求的结果,而不是响应最慢的结果。

用法

官方案例

  1. 使用 CancelToken.source 工厂方法创建 cancel token,像这样:
    // CancelToken是一个构造函数,用于创建一个cancelToken实例对象
    // cancelToken实例对象包含了一个promise属性,值为可以触发取消请求的一个promise
    const CancelToken = axios.CancelToken;
    // 执行source()得到的是一个包含了cancelToken对象和一个取消函数cancel()的对象
    // 即 source = {token: cancelToken对象, cancel: 取消函数}
    const source = CancelToken.source();
    
    // 在请求的配置中配置cancelToken,那么这个请求就有了可以取消请求的功能
    axios.get('/user/12345', {
         
      cancelToken: source.token
    }).catch(function(thrown) {
         
      if (axios.isCancel(thrown)) {
         
        console.log('Request canceled', thrown.message);
      } else {
         
         // 处理错误
      }
    });
    
    axios.post('/user/12345', {
         
      name: 'new name'
    }, {
         
      cancelToken: source.token
    })
    
    // 执行取消请求(message 参数是可选的)
    source.cancel('Operation canceled by the user.');
    
  2. 通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token
    const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('/user/12345', {
         
      cancelToken: new CancelToken(function executor(c) {
         
        // executor 函数接收一个 cancel 函数作为参数
        // 把cancel函数传递给外面,使得外面能控制执行取消请求
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();
    

看起来有些晕,毕竟不知道里面是怎么运作的,稍后通过源码解析。这里简单解释就是,在请求中配置cancelToken这个属性,是为了使得请求具有可以取消的功能;cancelToken属性的值是一个CancelToken实例对象,在它的executor函数中提取出cancel函数,执行这个cancel函数来取消请求。

我的实例

点击标签,执行getCourse函数。点击某个标签时,先取消之前的请求(如果之前的请求已完成,取消请求不会有任何操作)。效果是,页面显示的总是最后点击的标签对应的结果。

分两步,第一步,在get请求中配置cancelToken属性,开启取消请求的功能,且在其属性值中将cancel函数赋给cancelRequest,使得外部可以调用cancel函数来取消请求;第二步,在执行请求前,先取消前一次的请求。

import axios from 'axios'
export default {
   
    
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值