多个获取按钮和 AbortController

Question

I'm new to Svelte and learning it for self-education.
I'm trying to implement very basic scenario:
there are multiple buttons on the page, each button fetches some data and displays result in the same area.
To make sure that due to the different network response timings later result will not be overwritten by old request I want to abort all previous fetches.
Here is the REPL I've made so far: https://svelte.dev/repl/c763e1814da740f186620d75ad1fa42f?version=3.38.2
Question: why request aborted in advance and how to correct this?

(Any advises how to make my Svelte code styling better will be much appreciated, I suspect this logic can be implemented in much better/efficient way)

Answer 1

It's the AbortController. Once abort() is called it stays in the aborted state. I looked for some references but couldn't find any documentation that states this explicitly. However, a bit of trial and error seems to prove this. You need to create a new AbortController after calling abort().