How do I cancel an HTTP fetch request

Question

There is a new API for making requests from JavaScript  fetch    Is there any built in mechanism for canceling these requests in-flight

User · Accepted Answer

TL DR   fetch now supports a signal parameter as of 20 September 2017  but not   all browsers seem support this at the moment   2020 UPDATE  Most major browsers  Edge  Firefox  Chrome  Safari  Opera  and a few others  support the feature  which has become part of the DOM living standard   as of 5 March 2020   This is a change we will be seeing very soon though  and so you should be able to cancel a request by using an AbortControllers AbortSignal   Long Version  How to   The way it works is this   Step 1  You create an AbortController  For now I just used this   const controller   new AbortController    Step 2  You get the AbortControllers signal like this   const signal   controller signal  Step 3  You pass the signal to fetch like so   fetch urlToFetch        method   get       signal  signal      lt ------ This is our AbortSignal      Step 4  Just abort whenever you need to   controller abort     Here s an example of how it would work  works on Firefox 57      x000D   x000D   lt script gt  x000D         Create an instance  x000D      const controller   new AbortController   x000D      const signal   controller signal x000D   x000D         x000D         Register a listenr  x000D      signal addEventListener  abort        gt    x000D          console log  aborted    x000D         x000D         x000D   x000D   x000D      function beginFetching     x000D          console log  Now fetching    x000D          var urlToFetch    https   httpbin org delay 3   x000D   x000D          fetch urlToFetch    x000D                  method   get   x000D                  signal  signal  x000D                 x000D               then function response    x000D                  console log  Fetch complete   Not aborted     x000D                 catch function err    x000D                  console error   Err    err     x000D                  x000D        x000D   x000D   x000D      function abortFetching     x000D          console log  Now aborting    x000D             Abort  x000D          controller abort   x000D        x000D   x000D   lt  script gt  x000D   x000D   x000D   x000D   lt h1 gt Example of fetch abort lt  h1 gt  x000D   lt hr gt  x000D   lt button onclick  beginFetching     gt  x000D      Begin x000D   lt  button gt  x000D   lt button onclick  abortFetching     gt  x000D      Abort x000D   lt  button gt  x000D   x000D   x000D    Sources    The final version of AbortController has been added to the DOM specification The corresponding PR for the fetch specification is now merged  Browser bugs tracking the implementation of AbortController is available here  Firefox   1378342  Chromium   750599  WebKit   174980  Edge   13009916

User · Answer

https   developers google com web updates 2017 09 abortable-fetch  https   dom spec whatwg org  aborting-ongoing-activities     setup AbortController const controller   new AbortController       signal to pass to fetch const signal   controller signal      fetch as usual fetch url    signal    then response   gt             catch e   gt         catch the abort if you like   if  e name      AbortError                         when you want to abort controller abort      works in edge 16  2017-10-17   firefox 57  2017-11-14   desktop safari 11 1  2018-03-29   ios safari 11 4  2018-03-29   chrome 67  2018-05-29   and later     on older browsers  you can use github s whatwg-fetch polyfill and AbortController polyfill   you can detect older browsers and use the polyfills conditionally  too   import  abortcontroller-polyfill dist abortcontroller-polyfill-only  import  fetch  from  whatwg-fetch      use native browser implementation if it supports aborting const abortableFetch     signal  in new Request        window fetch   fetch

User · Answer

Let s polyfill   if  AbortController     class AbortController       constructor           this aborted   false        this signal   this signal bind this             signal abortFn  scope          if  this aborted            abortFn apply scope    name   AbortError              this aborted   false          else           this abortFn   abortFn bind scope                     abort           if  this abortFn            this abortFn   reason   canceled              this aborted   false          else           this aborted   true                       const originalFetch   window fetch     const customFetch    url  options    gt        const   signal     options             return new Promise  resolve  reject    gt          if  signal            signal reject  this                 originalFetch url  options           then resolve           catch reject                   window fetch   customFetch      Please have in mind that the code is not tested  Let me know if you have tested it and something didn t work  It may give you warnings that you try to overwrite the  fetch  function from the JavaScript official library

User · Answer

As for now there is no proper solution  as  spro says   However  if you have an in-flight response and are using ReadableStream  you can close the stream to cancel the request   fetch  http   example com   then  res    gt      const reader   res body getReader               Your code for reading streams goes here             To abort cancel HTTP request      reader cancel

User · Answer

This works in browser and nodejs Live browser demo const cpFetch  require  cp-fetch    const url   https   run mocky io v3 753aa609-65ae-4109-8f83-9cfe365290f0 mocky-delay 3s     const chain   cpFetch url   timeout  10000        then response   gt  response json         then data   gt  console log  Done     data   err   gt  console log  Error     err     setTimeout     gt  chain cancel    1000      abort the request after 1000ms

User · Answer

As of Feb 2018  fetch   can be cancelled with the code below on Chrome  read Using Readable Streams to enable Firefox support    No error is thrown for catch   to pick up  and this is a temporary solution until AbortController is fully adopted   fetch  YOUR CUSTOM URL    then response   gt      if   response body        console warn  ReadableStream is not yet supported in this browser   See https   developer mozilla org en-US docs Web API ReadableStream       return response            get reference to ReadableStream so we can cancel abort this fetch request    const responseReader   response body getReader      startAbortSimulation responseReader         Return a new Response object that implements a custom reader    return new Response new ReadableStream new ReadableStreamConfig responseReader         then response   gt  response blob     then data   gt  console log  Download ended  Bytes downloaded    data size    catch error   gt  console error  Error during fetch     error        Here s an example of how to abort request once fetch   starts function startAbortSimulation responseReader         abort fetch   after 50ms   setTimeout function         console log  aborting fetch             responseReader cancel        then function           console log  fetch   aborted               50         ReadableStream constructor requires custom implementation of start   method function ReadableStreamConfig reader      return       start controller          read          function read             reader read   then   done value     gt              if  done                controller close                return                        controller enqueue value             read

[javascript] How do I cancel an HTTP fetch() request?

TL/DR:

Long Version

How to:

Sources:

Examples related to javascript

Examples related to ajax

Examples related to fetch-api