How do I cancel an HTTP fetch() request?

by

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, // <------ 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+):

<script>
    // Create an instance.
    const controller = new AbortController()
    const signal = controller.signal

    /*
    // Register a listenr.
    signal.addEventListener("abort", () => {
        console.log("aborted!")
    })
    */


    function beginFetching() {
        console.log('Now fetching');
        var urlToFetch = "https://httpbin.org/delay/3";

        fetch(urlToFetch, {
                method: 'get',
                signal: signal,
            })
            .then(function(response) {
                console.log(`Fetch complete. (Not aborted)`);
            }).catch(function(err) {
                console.error(` Err: ${err}`);
            });
    }


    function abortFetching() {
        console.log('Now aborting');
        // Abort.
        controller.abort()
    }

</script>



<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
    Begin
</button>
<button onclick="abortFetching();">
    Abort
</button>

Sources:

More Related Contents:

  1. Fetch API request timeout?
  2. How do I post form data with fetch api?
  3. Fetch API vs XMLHttpRequest
  4. Intercept fetch() API requests and responses in JavaScript
  5. 5xx or 4xx error with “No ‘Access-Control-Allow-Origin’ header is present”
  6. Load More Posts Ajax Button in WordPress
  7. Disable same origin policy in Chrome
  8. URL Encode a string in jQuery for an AJAX request
  9. Replace HTML page with contents retrieved via AJAX
  10. Javascript : Send JSON Object with Ajax?
  11. Browser Timeouts
  12. AngularJS POST Fails: Response for preflight has invalid HTTP status code 404
  13. Why do people put code like “throw 1; ” and “for(;;);” in front of json responses? [duplicate]
  14. jQuery Ajax requests are getting cancelled without being sent
  15. How to load json into my angular.js ng-model?
  16. syntax error: unexpected token
  17. What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?
  18. jquery ajax readystate 0 responsetext status 0 statustext error
  19. how to assign javascript variable value to php variable
  20. How to write data to a JSON file using Javascript
  21. Asynchronous file upload (AJAX file upload) using jsp and javascript [duplicate]
  22. How to send multipart/form-data form content by ajax (no jquery)?
  23. Bind events on dynamic created elements inserted by AJAX (check box)
  24. responseXML always null
  25. How to upload string as file with jQuery or other js framework
  26. Empty “for” loop in Facebook ajax
  27. How to submit checkboxes from all pages with jQuery DataTables
  28. Like button Ajax in Ruby on Rails
  29. creating highchart with ajax json data
  30. Python Flask Cors Issue

Leave a Comment