TIL: Abort Controller

Subscribe to my newsletter and never miss my upcoming articles

Usually Async requests are not cancellable and you just have to abandon those requests.

Today I learned about the Abort Controller and it is very useful.

It has a really good support in general and if you are using Babel with CoreJS, I thing it will be transpiled anyway.

Let's take a look at an example. Let's create a simple Image Uploader in plain HTML, CSS and JS.

HTML:

  <form id="imageUploadForm">
    <div>
      <label for="file">Image</label>
      <div>
        <input type="file" name="file" id="file" />
      </div>
    </div>
    <div>
      <button type="submit">Start Upload</button>
      <button type="reset">Reset</button>
      <button type="button" id="stop">Stop Upload</button>
    </div>
  </form>

And JavaScript:

document.addEventListener('DOMContentLoaded', () => {
  const formEl = document.querySelector('#imageUploadForm')
  formEl && attachFormEvents(formEl)
})

const attachFormEvents = (formEl) => {
  if (!formEl) {
    return
  }
  const stop = formEl.querySelector('#stop')
  const controller = new AbortController()
  const signal = controller.signal

  formEl.addEventListener('submit', (e) => {
    e.preventDefault()
    e.stopPropagation()
    const formData = new FormData(formEl)
    const url = 'https://1u3o3.sse.codesandbox.io/upload'
    return fetch(url, {signal, method: 'POST', body: formData})
      .then(r => r.json())
      .then(console.log)
      .catch(console.error)
  })

  stop && stop.addEventListener('click', (e) => {
    controller.abort()
  })
}

How it works? Lets take a look at it step by step:

  1. Create an Abort Controller with new AbortController()
  2. Get the signal from the Controller with controller.signal
  3. When creating fetch, provide abort signal in the Request Configuration with key signal
  4. Call controller.abort() whenever you wanna abort the request

Let me know if you have tried the Abort Controller already.

Comments (2)

Chris Bongers's photo

Hi Pankaj,

Very interesting write-up, actually haven't seen this in action. What happens to the perhaps "partial" file on the server side?

Is there a way that would receive the abort?

Pankaj Patel's photo

Hey Daily Dev Tips

The server would not know about this abort, in my opinion, it is better to make another acknowledgement request to the server to let server know about the abort.