Abortable Fetch

index.js

// This will allow us to abort the fetch
let controller

// Abort if the user clicks
abortBtn.addEventListener('click', () => 
  if (controller) controller.abort()
)

// Load the content
loadBtn.addEventListener('click', async () => {
  controller = new AbortController()
  const signal = controller.signal

  // Prevent another click until this fetch is done
  loadBtn.disabled = true
  abortBtn.disabled = false

  try {
    const contentUrl = 'https://example.com/api'
    // Fetch the content & use the signal for aborting
    const response = await fetch(contentUrl, { signal })
    // Add the content to the page
    output.innerHTML = await response.json()
  } catch (error) {
    // Avoid showing an error message if the fetch was aborted
    if (error.name !== 'AbortError') {
      output.textContent = 'Fetching failed.'
    }
  }

  // These actions happen no matter how the fetch ends
  loadBtn.disabled = false
  abortBtn.disabled = true
})

Aborting Fetch whatwg/fetch#27
API https://dom.spec.whatwg.org/#aborting-ongoing-activities