Fetch API request timeout

Question

I have a fetch-api POST request  fetch url      method   POST     body  formData    credentials   include      I want to know what is the default timeout for this  and how can we set it to a particular value like 3 seconds or indefinite seconds

User · Answer

I really like the clean approach from this gist using Promise.race

fetchWithTimeout.js

export default function (url, options, timeout = 7000) {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('timeout')), timeout)
        )
    ]);
}

main.js

import fetch from './fetchWithTimeout'

// call as usual or with timeout as 3rd argument

fetch('http://google.com', options, 5000) // throw after max 5 seconds timeout error
.then((result) => {
    // handle result
})
.catch((e) => {
    // handle errors and timeout error
})

User · Answer

Using c-promise2 lib the cancellable fetch with timeout might look like this one  Live jsfiddle demo   import CPromise from  quot c-promise2 quot      npm package  function fetchWithTimeout url   timeout     fetchOptions             return new CPromise  resolve  reject   signal     gt            fetch url      fetchOptions  signal   then resolve  reject         timeout             const chain   fetchWithTimeout  quot https   run mocky io v3 753aa609-65ae-4109-8f83-9cfe365290f0 mocky-delay 10s quot    timeout  5000        then request  gt  console log  done             chain cancel    - to abort the request before the timeout  This code as a npm package cp-fetch

User · Answer

there s no timeout support in the fetch API yet  But it could be achieved by wrapping it in a promise   for eg     function fetchWrapper url  options  timeout        return new Promise  resolve  reject    gt          fetch url  options  then resolve  reject          if  timeout            const e   new Error  Connection timed out            setTimeout reject  timeout  e

User · Answer

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      gt  controller abort    5000   fetch url    signal  controller signal    then response   gt         completed request before timeout fired       If you only wanted to timeout the request  not the response  add       clearTimeout timeoutId       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

User · Answer

You can create a timeoutPromise wrapper    function timeoutPromise timeout  err  promise      return new Promise function resolve reject        promise then resolve reject       setTimeout reject bind null err   timeout             You can then wrap any promise    timeoutPromise 100  new Error  Timed Out     fetch          then         catch          It won t actually cancel an underlying connection but will allow you to timeout a promise  Reference

User · Answer

If you haven t configured timeout in your code  It will be the default request timeout of your browser   1  Firefox - 90 seconds  Type about config in Firefox URL field  Find the value corresponding to key network http connection-timeout  2  Chrome - 300 seconds  Source

User · Answer

Building on Endless  excellent answer  I created a helpful utility function   const fetchTimeout    url  ms    signal     options           gt        const controller   new AbortController        const promise   fetch url    signal  controller signal     options         if  signal  signal addEventListener  abort        gt  controller abort         const timeout   setTimeout      gt  controller abort    ms       return promise finally      gt  clearTimeout timeout          If the timeout is reached before the resource is fetched then the fetch is aborted  If the resource is fetched before the timeout is reached then the timeout is cleared  If the input signal is aborted then the fetch is aborted and the timeout is cleared    const controller   new AbortController     document querySelector  button cancel   addEventListener  click        gt  controller abort      fetchTimeout  example json   5000    signal  controller signal         then response   gt  response json         then console log       catch error   gt            if  error name      AbortError                    fetch aborted either due to timeout or due to user clicking the cancel button           else                  network error or json parsing error                     Hope that helps

User · Answer

EDIT  The fetch request will still be running in the background and will most likely log an error in your console  Indeed the Promise race approach is better  See this link for reference Promise race   Race means that all Promises will run at the same time  and the race will stop as soon as one of the promises returns a value  Therefore  only one value will be returned  You could also pass a function to call if the fetch times out  fetchWithTimeout url      method   POST     body  formData    credentials   include      5000       gt       do stuff here         If this piques your interest  a possible implementation would be   function fetchWithTimeout url  options  delay  onTimeout      const timer   new Promise  resolve    gt        setTimeout resolve  delay          timeout  true                  return Promise race       fetch url  options       timer      then response   gt        if  response timeout          onTimeout              return response

User · Answer

Edit 1 As pointed out in comments  the code in the original answer keeps running the timer even after the promise is resolved rejected  The code below fixes that issue  function timeout ms  promise      return new Promise  resolve  reject    gt        const timer   setTimeout      gt          reject new Error  TIMEOUT           ms       promise        then value   gt            clearTimeout timer          resolve value                  catch reason   gt            clearTimeout timer          reject reason                     Original answer It doesn t have a specified default  the specification doesn t discuss timeouts at all  You can implement your own timeout wrapper for promises in general     Rough implementation  Untested  function timeout ms  promise      return new Promise function resolve  reject        setTimeout function           reject new Error  quot timeout quot           ms      promise then resolve  reject          timeout 1000  fetch   hello    then function response         process response    catch function error         might be a timeout error     As described in https   github com github fetch issues 175 Comment by https   github com mislav

User · Answer

fetchTimeout  url options timeout 3000        return new Promise   resolve  reject    gt          fetch url  options         then resolve reject        setTimeout reject timeout

[javascript] Fetch API request timeout?

Examples related to javascript

Examples related to ajax

Examples related to fetch-api