如何在 AbortController.abort() 之后启动另一个请求？答案

【问题标题】：How can I start another request after AbortController.abort()?如何在 AbortController.abort() 之后启动另一个请求？
【发布时间】：2018-12-08 00:31:04
【问题描述】：

我读过有关使用AbortController.abort() 取消获取请求的信息。有没有办法在调用此命令后再次启动请求而不中止它？

例如，在this demo from MDN，一旦点击取消下载，点击下载视频会再次触发抓取，但会立即中止。

有没有办法再次允许这个请求而不中止它？那么，在这种情况下，如何点击下载视频开始下载，点击取消下载取消下载，然后点击下载视频 再次开始下载？例如，如果用户不小心点击了取消下载...

【问题讨论】：

标签： asynchronous httprequest fetch abort

【解决方案1】：

我知道这可能有点晚了，但无论如何我都会留下这个答案，以防有人需要它。

我不知道这是否是最佳方法，但为了继续执行获取请求（使用“相同”信号），我必须为每个请求创建一个新的 AbortController 实例。

就我而言（所有代码都包含在类声明中），我每次都删除并创建一个新实例，如下所示：

class Foo Extends Bar {

    abort_controller_instance = false;

    constructor(params){
        super(params);
        this.resetOrStartAbortController();
    }

    resetOrStartAbortController(){
        if(this.abort_controller_instance){
            delete this.abort_controller_instance;
        }
        this.abort_controller_instance = new AbortController();
    }

    abortFetchRequest(){
        if(this.abort_controller_instance){
            this.abort_controller_instance.abort();
            this.resetOrStartAbortController();
        }
    }

    ...

}

这可能不是最优雅的解决方案，但它确实有效。

问候！

【讨论】：

【解决方案2】：

例如，在 MDN 的这个演示中，一旦点击取消下载，点击下载视频将再次触发提取，但立即中止。

他们修复了example。单击Cancel download 后，您将能够开始新的下载并一次又一次地取消它。为了实现Download button每次都实例化一个新的AbortController，这样你每次都会得到一个新的中止信号：

downloadBtn.addEventListener('click', fetchVideo);

function fetchVideo() {
  controller = new AbortController;
  signal = controller.signal;
  // ...

因此，可以为您可能希望取消的每个请求实例化新的 AbortController。

【讨论】：

【解决方案3】：

您只是不能重用或重置AbortController 或其信号。如果您需要重置它，您必须创建一个新的 AbortController 实例。

我认为这是设计使然。否则它可能会变得混乱，例如如果您将控制器或信号交给某个外部库，突然它们可能会意外远程中止和取消中止您的内部状态。

【讨论】：