Fetch API increase timeout

Question

I want to increase the timeout (say to 10 mins) of the fetch API for one of my PATCH request.
So far I only found a way how to decrease it with here with AbortController Fetch API request timeout?

Is that something that browser has a full control of? Should I search for alternatives such as Axios or AJAX?

Erl

An HTTP request should not hang for 10 minutes! If you have a long-running job on the server that needs to complete, you should do that with background workers, not by keeping the request hanging. – Hooker

When dealing with requests that last longer than 1-2 minutes it's a good idea to respond with a 202 code to state that the request has been accepted but not completed yet. After that you could either leave it like that and let the user refresh to check when it will be ready (or async checking at set intervals), or use sockets and notify the client when the request has been processed. – Nutting

@Hooker wouldn't it be the same issue with timeout when executing a time taking query in the web worker? My understanding is that either browser or fetch API itself has a timeout – Erl

I'm not talking about web workers. It appears that either you have a network problem and the server isn't reachable, in which case increasing the timeout won't help. Or the task the server performs takes several minutes, and thus the request times out. In this case the server should return a 202 status or similar immediately and complete the job in the background somehow. – Hooker

Seeing someone edited this so it is appearing back in the active stuff. The answer to this would have been increase the time on the server, has nothing to do with the clientside calls. The server controls how long requests remain open. – Ladyship

Answer 1

The Fetch API does not provide a way to increase timeout; besides, any network request hanging for any number of minutes is too long. Instead, you can use an AbortController to provide a timeout:

function networkRequest() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log("Response received", response);
    })
    .catch((err) => {
      console.error(`Network request t: ${err.message}`);
    });
}

Doting