How to Cancel Request In React

post here

in main page (app.tsx) try to switch component WithAbort and WithOutAbort

• Test component is not handle canceling request might be a error when component unmounted
• Fix component is handle canceling request by using AbortController see below

---

use AbortController(browser support) for cannel request

Testing on http client lib and normal fetch(browser)

fetch

adding signal opts in fetch

const rawData = await fetch("https://jsonplaceholder.typicode.com/todos/", {
  signal: controller.signal,
});
const data = await rawData.json();

axios

adding signal opts in axios

const data = await axios.get("https://jsonplaceholder.typicode.com/todos", {
  signal: controller.signal,
});

ky might be a bug ??

refs

• from doc
• issue

const data = await ky
  .get("https://jsonplaceholder.typicode.com/todos", {
    signal: controller.signal,
  })
  .json(); // not working as expected

see example in react useEffect here