AbortController中断请求

一、步骤

(1) 创建了一个控制器 controller,每个控制器都自带一个信号对象(signal 属性)

(2)发送请求的时候把这个信号对象带上(signal 参数)

(3)通过控制器的 abort() 方法,中断请求。

二、事例

(1)upload函数签名

/** @name 上传到OSS */
  upload = async (
    file: File,
    path: string,
    observe?: (ob: FetchObserver) => void,
    signal?: AbortSignal,
  )

(2)创建AbortController对象,调用upload请求并传入signal

async handleUpload({ file }: UploadOption) {
    const controller = new AbortController();
    const signal = controller.signal;
    const ossPath = await this.computedService
      .upload(
        file,
        this.computedUploadPath,
        ob =>
          ob.addEventListener('requestprogress', event => {
            const percentage = (event.loaded / event.total) * 100;
            const status = percentage >= 100 ? 'finished' : 'uploading';
            this.$emit(
              'uploadChange',
              this.getUploadData(uploadData, percentage, status),
            );
          }),
        signal,
      )
  }

 (3)中断请求

 /** @name 取消上传 */
  handleCancelUpload({ controller, file }: FileItem) {
    if (controller) {
      controller.abort();
    }
  }

三、参考

https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController

http://web.h3399.cn/FetchObserver.htm

https://www.cnblogs.com/ziyunfei/p/6617900.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值