Fetch API request timeout?

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)})

^{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}

Edit if you like an even cleaner solution handling all edge cases go for this answer: https://stackoverflow.com/a/57888548/1059828.

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 argumentfetch('http://google.com', options, 5000) // throw after max 5 seconds timeout error.then((result) => {    // handle result}).catch((e) => {    // handle errors and timeout error})

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) => {    const timer = setTimeout(() => {      reject(new Error('TIMEOUT'))    }, ms)    promise      .then(value => {        clearTimeout(timer)        resolve(value)      })      .catch(reason => {        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("timeout"))    }, 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/175Comment by https://github.com/mislav