如何取消已中止的获取

huangapple go评论55阅读模式
英文:

How unabort the aborted fetch

问题

const startFetch = document.querySelector("#startFetch");

const stopFetch = document.querySelector("#stopFetch");

const controller = new AbortController();
const todos = async() => {
  fetch("https://jsonplaceholder.typicode.com/todos", {
      signal: controller.signal,
    })
    .then((data) => data.json())
    .then((todos) => {
      console.log(todos);
    })
    .catch((err) => {
      console.log(err.message);
    });
};
startFetch.addEventListener("click", todos);
stopFetch.addEventListener("click", () => {
  controller.abort();
});
<button id="startFetch">startFetch</button>
<button id="stopFetch">stopFetch</button>

I need to un-abort an aborted fetch


<details>
<summary>英文:</summary>

I aborted, fetched but I couldn&#39;t call the fetch again

const startFetch = document.querySelector(" #startFetch");


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    const stopFetch = document.querySelector(&quot;#stopFetch&quot;);

    const controller = new AbortController();
    const todos = async() =&gt; {
      fetch(&quot;https://jsonplaceholder.typicode.com/todos&quot;, {
          signal: controller.signal,
        })
        .then((data) =&gt; data.json())
        .then((todos) =&gt; {
          console.log(todos);
        })
        .catch((err) =&gt; {
          console.log(err.message);
        });
    };
    startFetch.addEventListener(&quot;click&quot;, todos);
    stopFetch.addEventListener(&quot;click&quot;, () =&gt; {
      controller.abort();
    });

&lt;!-- language: lang-html --&gt;

    &lt;button id=&quot;startFetch&quot;&gt;startFetch&lt;/button&gt;
    &lt;button id=&quot;stopFetch&quot;&gt;stopFetch&lt;/button&gt;

&lt;!-- end snippet --&gt;

I need to un-abort an aborted fetch

</details>


# 答案1
**得分**: 1

无法。一个被中止的获取操作关闭了连接,你需要发起一个单独的新请求。一个被中止的信号保持了其状态,你需要创建一个新的信号(以及一个新的 `AbortController`)。

```javascript
const stopFetch = document.querySelector("#stopFetch");

let controller;
const todos = async() => {
  controller = new AbortController();
  fetch("https://jsonplaceholder.typicode.com/todos", {
      signal: controller.signal,
    })
    .then(data => data.json())
    .then(todos => {
      console.log(todos);
    }, err => {
      console.log(err.message);
    }).finally(() => {
      controller = null;
    });
};
startFetch.addEventListener("click", todos);
stopFetch.addEventListener("click", () => {
  if (controller) {
    controller.abort();
  } else {
    console.log("no active request");
  }
});
<button id="startFetch">startFetch</button>
<button id="stopFetch">stopFetch</button>
英文:

You cannot. An aborted fetch closed the connection, you need to make a separate new request. An aborted signal stays keeps that state, you need to create a new signal (and a new AbortController).

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

const stopFetch = document.querySelector(&quot;#stopFetch&quot;);

let controller;
const todos = async() =&gt; {
  controller = new AbortController();
  fetch(&quot;https://jsonplaceholder.typicode.com/todos&quot;, {
      signal: controller.signal,
    })
    .then(data =&gt; data.json())
    .then(todos =&gt; {
      console.log(todos);
    }, err =&gt; {
      console.log(err.message);
    }).finally(() =&gt; {
      controller = null;
    });
};
startFetch.addEventListener(&quot;click&quot;, todos);
stopFetch.addEventListener(&quot;click&quot;, () =&gt; {
  if (controller) {
    controller.abort();
  } else {
    console.log(&quot;no active request&quot;);
  }
});

<!-- language: lang-html -->

&lt;button id=&quot;startFetch&quot;&gt;startFetch&lt;/button&gt;
&lt;button id=&quot;stopFetch&quot;&gt;stopFetch&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月26日 04:42:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76552324.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定