Axios race condition with cancel token?

[9mm]

Describe the issue

I'm using axios in the browser.

Cancel token exceptions do not appear to correspond 100% with what Chrome developer tools considers a response failure.

Essentially I want to retry certain requests (even POST requests) if the server doesn't respond within 5000ms. Obviously with non-idempotent requests it's important that success/failure of response matches the server.

So I tried to implement a connection timeout using the following code. A more simple version of this code is here, and it has the same problem.

I noticed that if I set the connection timeout to be as close as possible to the time it takes for server to respond (to emulate a request finishing right at the time out), there appears to be a race condition where cancel is retried even though it was successful

I have tried axios-retry and it has the same issue.

Example Code

const makeRequest = async (args, connTimeout, responseTimeout) => {
  const source = axios.CancelToken.source();

  const argsWithToken = {
    ...args,
    cancelToken: source.token,
  };

  const api = buildAxios(responseTimeout);

  const timeout = setTimeout(source.cancel, connTimeout);

  return api(argsWithToken).then(result => {
    clearTimeout(timeout);
    return result;
  });
};

const handleRetries = (args, maxRetries) => (
  new Promise(async (resolve, reject) => { /* eslint-disable-line */
    let retries = 0;
    let success = false;

    while (!success && retries < maxRetries) {
      try {
        const result = await makeRequest(args, 300, 30000); /* eslint-disable-line */
        success = true;
        resolve(result);
      } catch (err) {
        retries += 1;
        // console.log(`Error making ${args.method} request to ${args.url}, retrying... #${retries}`);
      }
    }
    // line below is included to prevent process leaks
    if (!success) reject(new Error(`Retried ${retries} times and still failed: ${args.url}`));
  })
);

handleRetries({url: '/settings', method: 'get'}, 3)

Expected behavior, if applicable

I don't know if it's my code, a limitation of JS, or axios, but I would expect that cancel would never get called, as the timeout is cleared in the success callback.

Environment

• Axios Version: ^0.21.1
• Browser Chrome
• Browser latest
• OS: latest OSX
• Additional Library Versions Vue 3

[github-actions]

Hello! 👋

This issue is being automatically closed because it does not follow the issue template. Please read the issue template carefully and follow all of the instructions when opening a new issue.

Thanks