How to set timeout in Fetch API using react js

Question

I am using fetch post method in react js and when sending request to backend it takes 7 mints to provide the response and before that front end automatically gets timed out. Can you please help me out how to set 10 mints time in fetch method for front to wait for the response and only gets timed out when backend takes more than 10 mints. Please let us know if i have to install any dependency.

Also just to inform you i have installed dependency "whatwg-fetch-timeout": "^2.0.2-timeout" and it was working fine on development server but when tried to create build package it failed to create build the build. sample code:

fetch("http://" + hostName + ":" + port + "/searchData", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Login: login,
    ID: id
  },
  body: JSON.stringify({
    StartDate: StartDate === "" ? null : StartDate,
    EndDate: EndDate === "" ? null : EndDate,
    FileName: FileName === "" ? null : FileName,
    RecordCount: RecordCount === "" ? null : RecordCount,
    Status: Status
  })
})
  .then(response => {
    resStatus = response.status;
    return response.json();
  })
  .then(responseJson => {
    //source code
  })
  .catch(error => {});

7 minutes? haha, who would wait for 7 minutes until data is loaded? looks like your services is not that optimised :D — dfsq, Mar 10 '19 at 10:31

score 4 · Answer 1 · answered Mar 10 '19 at 10:32

How about add your own timeout Something like

function timeoutPromise(ms, promise) {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error("promise timeout"))
    }, ms);
    promise.then(
      (res) => {
        clearTimeout(timeoutId);
        resolve(res);
      },
      (err) => {
        clearTimeout(timeoutId);
        reject(err);
      }
    );
  })
}

then call it in ES7 async/await syntax

async request() {
  try { 
    let res = await timeoutPromise(10*60*1000, fetch('/hello'));
  } catch(error) {
    // might be a timeout error
  }
}

Also for ref Fetch API request timeout? try this.

score 1 · Answer 2 · answered Mar 10 '19 at 10:58

1

If you have control over the server, consider sending status code 102 (Still processing) in between the request and the final response, in order to let the client know not to timeout.

answered Mar 10 '19 at 10:58

jorbuedo

2,041
1
8
20

score 1 · Answer 3 · answered Apr 20 '21 at 01:49

Promise.race can address this.

// "wait" function returns a new Promise that rejects after waiting
const wait = milliseconds => new Promise(
  (res, rej) => setTimeout(
    () => rej(new Error(`timed out after ${milliseconds} ms`)),
    milliseconds
  )
);

// the fetch could remain unchanged
// ...but it helps to add the "signal" property to abort the request early
const abortController = new AbortController();
const fetchData = fetch(
  'http://url',
  {
    method:"POST",
    signal: abortController.signal
  }
);

// now the fetch races against the wait Promise
const fetchOrTimeout = Promise.race([fetchData, wait(10 * 60 * 1000)]);

// ...and the difference here is that now the logic could have a rejected Error from "wait"
// (also this is the place to send the abort signal to fetch)
fetchOrTimeout
.then(response => { console.log('fetch worked!'); return response.json(); })
.catch(error => { console.log(`fetch error: ${error}`); abortController.abort(); });

How to set timeout in Fetch API using react js

3 Answers3

Linked