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

Question

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

例如，在来自 MDN 的演示中，一旦单击了取消下载，单击下载视频将再次触发获取，但会立即中止它。

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

Answer 1

你不能。

AbortController

或其信号不能重复使用或重置。如果您需要“重置”它，则必须创建一个新的

AbortController

实例并使用它。

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

Answer 2

例如，在 MDN 的这个演示中，一旦单击“取消下载”，单击“下载视频”将再次触发获取，但会立即中止它。

他们修复了示例。单击

Cancel download

后，您将能够开始新的下载并再次取消下载，一遍又一遍。为了实现

Download button

每次都实例化一个新的AbortController，这样你每次都会得到一个新的中止信号：

downloadBtn.addEventListener('click', fetchVideo);

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

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

Answer 3

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

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();
        }
    }

    ...

}

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