title: How to abort fetching HTTP request using AbortController on the same button
body: <p>The problem is that I need to get only last API response by clicking a &quot;Fetch Data&quot; button. Earlier requests should be canceled.</p>
  <p>The idea is to use AbrotController. Unfortunately, I have a problem, because the requests are not canceled and a console receives the message:</p>
  <blockquote>
  <p>Fetch 1 error: Failed to execute 'fetch' on 'Window': The user aborted
  a request.</p>
  </blockquote>
  <p>Sample code below:</p>
  <pre><code>&lt;button id=&quot;test&quot;&gt;Fetch data&lt;/button&gt;
  
  let isLoading = false;
  
  let controller = new AbortController();
  const abort = () =&gt; controller.abort();
  
  const button = document.getElementById(&quot;test&quot;);
  
  const fetchData = () =&gt; {
    controller = new AbortController();
    
    if (isLoading) {
      abort();
    }
    
    isLoading = true;
    
    return fetch('https://jsonplaceholder.typicode.com/todos', {
          signal: controller.signal
        })
        .catch(e =&gt; {
          console.warn(`Fetch 1 error: ${e.message}`);
        })
        .finally(() =&gt; isLoading = false);;
  }
  
  button.addEventListener('click', () =&gt; {
    fetchData();
  });
  </code></pre>