Fetch API request timeout?

by

Using a promise race solution will leave the request hanging and still consume bandwidth in the background and lower the max allowed concurrent request being made while it’s still in process.

Instead use the AbortController to actually abort the request, Here is an example

const controller = new AbortController()

// 5 second timeout:
const timeoutId = setTimeout(() => controller.abort(), 5000)

fetch(url, { signal: controller.signal }).then(response => {
  // completed request before timeout fired

  // If you only wanted to timeout the request, not the response, add:
  // clearTimeout(timeoutId)
})

Alternative you can use the newly added AbortSignal.timeout(5000)… but it is not well implemented in most browser right now.

AbortController can be used for other things as well, not only fetch but for readable/writable streams as well. More newer functions (specially promise based ones) will use this more and more. NodeJS have also implemented AbortController into its streams/filesystem as well. I know web bluetooth are looking into it also. Now it can also be used with addEventListener option and have it stop listening when the signal ends

More Related Contents:

  1. How do I cancel an HTTP fetch() request?
  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. How to send data to the server via Ajax?
  6. How can I upload files asynchronously with jQuery?
  7. Download a file by jQuery.Ajax
  8. Variable doesn’t get returned from AJAX function
  9. Executing injected by innerHTML after AJAX call
  10. How does AJAX work?
  11. Post data to JsonP
  12. HTTP HEAD Request in Javascript/Ajax?
  13. Adding CSRFToken to Ajax request
  14. How to get response url in XMLHttpRequest?
  15. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  16. Is it any limit for POST data size in Ajax?
  17. Load google maps v3 dynamically with ajax
  18. How to use FormData in react-native?
  19. redux fetch body is not use with no cors mode
  20. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  21. Ajax Binary Response
  22. Basic authentication with fetch?
  23. Relative URLs in AJAX requests
  24. Send form data using ajax
  25. jQuery ajax async: false causes a strange warning?
  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