FG
🔌 APIs & SDKs

Axios send the same request twice and ignore the first response, only receives the second response.

Freshabout 22 hours ago
Mar 14, 20260 views
Confidence Score70%
70%

Problem

Describe the bug axios.post sends duplicate POST request and ignores the first response, only receives the second response. To Reproduce I don't know how to reproduce it since it's occurred. [code block] The submit function above is only called once, while the axios.post() is called twice. I have log for my system, in subject Additional context/Screenshots Expected behavior The request is only sent once. Environment: - Axios Version [e.g. 0.19.0] - OS: [e.g. Android 10; SM-G970U] - Browser [e.g. Chrome] - Browser Version [e.g. 80] - Additional Library Versions [e.g. React 16.8, redux 4.0.1 react-redux 7.1.0 redux-saga 1.0.3 ] Additional context/Screenshots <img width="1021" alt="Screen Shot 2563-03-17 at 12 26 08" src="https://user-images.githubusercontent.com/2849568/76825630-10b09580-684d-11ea-8b4e-2d28b5e5afd3.png"> You will see `request.query.t` for first and second time. it same requested.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Prevent Duplicate Axios POST Requests

Medium Risk

The issue of duplicate requests may be caused by the submit function being triggered multiple times due to rapid user interactions or event bubbling. This can lead to multiple Axios calls being made before the first response is received.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Debounce the Submit Function

    Implement a debounce mechanism to ensure that the submit function cannot be called again until a specified delay has passed. This will prevent multiple submissions in quick succession.

    javascript
    const debounce = (func, delay) => {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
};

const submit = debounce(() => {
  axios.post('/your-endpoint', data)
    .then(response => console.log(response))
    .catch(error => console.error(error));
}, 1000);
  2. 2

    Disable Submit Button After Click

    Disable the submit button immediately after it is clicked to prevent further clicks until the request is completed.

    javascript
    const [isSubmitting, setIsSubmitting] = useState(false);

const submit = async () => {
  setIsSubmitting(true);
  try {
    const response = await axios.post('/your-endpoint', data);
    console.log(response);
  } catch (error) {
    console.error(error);
  } finally {
    setIsSubmitting(false);
  }
};

<button onClick={submit} disabled={isSubmitting}>Submit</button>
  3. 3

    Check for Ongoing Requests

    Before making a new Axios request, check if there is already an ongoing request. If so, skip the new request.

    javascript
    let ongoingRequest = false;

const submit = async () => {
  if (ongoingRequest) return;
  ongoingRequest = true;
  try {
    const response = await axios.post('/your-endpoint', data);
    console.log(response);
  } catch (error) {
    console.error(error);
  } finally {
    ongoingRequest = false;
  }
};
  4. 4

    Log Requests for Debugging

    Add logging to track when requests are made and their responses. This will help identify if the issue persists after implementing the fixes.

    javascript
    axios.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

Validation

Test the application by attempting to submit the form multiple times in quick succession. Ensure that only one request is sent and that the button is disabled during the request. Check the console logs to confirm that only one request is logged.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi