zoukankan      html  css  js  c++  java
  • axios中断请求AbortController

    场景: 连续发送多次请求,只需要最后一次结果,模糊搜索,下载视频取消

    axios中的请求中断

    //VUE
     sendStr() {
          if(window.cancel) window.cancel()
          let CancelToken = axios.CancelToken;
          // let cancel
          axios
            .get(`http://localhost:3000/test?str=${this.searchStr}`, {
              cancelToken: new CancelToken(function executor(c) {
              window.cancel = c;
              })
            })
            .then(res => {
              window.console.log(res);
              window.cancel = null
            })
        }

    再相应间隔长的情况下,可以看到input事件中请求了五次,前几次都中断了,只保留最后一次

     
    image.png

    同样的方法,将后台定时器删掉,因为相应速度大于input事件触发间隔所以数据都成功返回


     
    image.png

    fetch手动中断

    fetch是一种原生HTTP数据请求的方式,是xml的替代方案,和axios类似同样使用了 JavaScript Promises 来处理结果/回调:

    AbortController对象

    根据文档说明我们可以了解到
    AbortController接口代表一个控制器对象,允许你在需要时中止一个或多个Web(网络)请求。

    你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与Web(网络)请求的通信。

    简单来说就是创建一个AbortController对象abortController,然后使用abortController.signal生成关联变量再添加到fetch请求参数中去,然后想要中断的时候使用关联该请求的abortController.abort()方法是使该请求中断

       download() {
          this.downloadController = new AbortController();
          this.signal = this.downloadController.signal;
          fetch(`http://localhost:3000/test?str=${this.searchStr}`, {
            signal: this.signal
          })
            .then(res => {
              window.console.log(res);
            })
            .catch(err => {
              window.console.log(err);
            });
        },
        termination() {
          this.downloadController.abort();
        }
    

    中断如下


     
    image.png
    ...未完待续(有时间封装的话)



    作者:3f376d24cd44
    链接:https://www.jianshu.com/p/16335f161498
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    微信公众号开发(二)用户关注
    搭建git服务器
    微信公众号开发(三)生成带参数的二维码
    windows 安装多个mysql
    微信公众号开发(一)前期 配置
    支付宝接口之条码支付
    mysql8.0 安装 修改密码 允许远程连接
    区块链开发金融交易平台
    区块链开发 在金融融资交易平台中的优势
    2019年区块链金融交易所钱包开发需要多少钱
  • 原文地址:https://www.cnblogs.com/baidei/p/14982518.html
Copyright © 2011-2022 走看看