await axios.get() Never Resolves

[ethan-cook]

Describe the issue

When calling axios.get() in an async function, passing in username and password authentication, intermittently the request will hang and never resolve.

Using the axios-debug-log package, I can see that Axios places the get request correctly, however, no response is ever returned. Nor is an error thrown.

This issue had also been found when using axios.get() to return an array buffer, however, I used a write stream as a temporary workaround for that case scenario.

Example Code

try {
	const { data } = await axios.get(`URL`, { auth: { username: username, password: password }});

	const images = _.filter(data.colorized, (image) => image["@primaryColorOptionCode"] == colorCode && image["@backgroundDescription"] == "Transparent" && image["@width"] == "2100");

	return images;
} catch(err) {
	this.logger.error(err.message);
	return [];
}

Expected behavior, if applicable

axios.get() to resolve its request, and return the response to the data constant.

I have tried both in Postman [9.17.1], Chrome [100.0.4896.127], and the vanilla Node.js HTTP package and was able to consistently make these GET requests. The problem only arises when utilizing Axios.

Environment

• Axios Version [0.27.2]
• Adapter [HTTP]
• Browser [Chrome]
• Browser Version [100.0.4896.127]
• Node.js Version [17.8.0]
• OS: Manjaro [21.2.6] and Ubuntu [lts-buster-slim]
• Additional Library Versions Nest.js [8.0.0] axios-debug-log [0.8.4] lodash [4.17.21]

Additional context/Screenshots

[michaeljaszczuk]

I have exactly the same issue with .post method...

[Alokkumar8]

I have same issue. I'm using axios.request() method for GET request. The script just hangs after calling this method. Even calling process.exit() doesn't work if you put it after await axios.request()

[magnum6actual]

Same experience. But in a mind boggling twist - this call ran fine until today. I have no idea what changed. I did not update any packages. Now this afternoon, axios never resolves the promise of a simple get call. Same call works fine in postman.

[magnum6actual]

Well, turns out mine wasn't an Axios issue at all. I had made an unrelated change to a react component that was resulting in infinite re-render loops - so the code just never had the chance to run the promise resolution.

[vanGalilea]

I have exactly the same issue with .post method...

For us, the same behavior happens, pretty much irregularly. In most cases after the user become online again (might not be related, yet that's the only breadcrumbs we see)

[zilayo]

I've experienced the same issue which seems to happen intermittently.

The request is made, but then it fails to receive the full response and no error is thrown - the process just hangs indefinitely.

Tried debugging on a patched axios 1.6.2 with a bunch of console.logs inside lib/adapters/http > req = transport.request(options, function handleResponse(res){}):

This is a get request and the response is gzip encoded.

res.headers['content-length']; // 19521

...

let totalResponseBytes = 0;
streams[0].on('data', (chunk) => { 
totalResponseBytes += chunk.length
console.log(`on data event: ${chunk.length} bytes received. Total ${totalResponseBytes} bytes of expected total ${responseLength} bytes` received.)
}

// on data event: 16384 bytes received. Total 16384 bytes of expected total 19521 bytes received

The stream fails to then receive any further chunks. When setting a timeout in the axios config this also never seems to trigger if the first chunk has already been received (seems to be expected behavior per #5886)

If I set onDownloadProgress: (e) => {} in my axios instance then it works fine:
// on data event: 16384 bytes received. Total 16384 bytes of expected total 19521 bytes received
// on data event: 3137 bytes received. Total 19521 bytes of expected total 19521 bytes received

So for the timebeing a workaround seems to be setting an empty onDownloadProgress config option.

[subooom]

My client is encountering a problem with form submission on their Samsung S24. When the form is submitted, it remains in a perpetual loading state and never completes. This issue is only present on the Samsung S24; form submission works correctly on desktops, laptops, iPhones, Macs, Linux systems, and other Android devices.

The form should resolve within seconds, as it does on other devices, but the loading indicator persists indefinitely on the Samsung S24, and possibly other S-series devices.

If anyone has insights or solutions for this issue, please let me know. Thank you!

The following is the simplified re-creatable fetch request I'm making, although using axios doesn't work either:

document.getElementById('loading').style.display = 'block';

const response = await fetch(
  'https://.../api/auth/sign-up',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),
  }
);

const result = await response.json();
document.getElementById('loading').style.display = 'none'; // this is never triggered on the Samsung S24 devices

Example using axios:

// Create an Axios instance with custom defaults and interceptors
const api: AxiosInstance = axios.create({
  baseURL: API_URL,
  timeout: 30000, // Request timeout in milliseconds
  headers: {
    'Content-Type': 'application/json',
  },
})

const sendSignupRequest = () => {
    if (formIsValid) {
      setLoading(true)
      const vals = getValues()
      api
        .post('/auth/create-an-account', vals)
        .then((resp) => {
          setLoading(false)
          if (resp.data.code === 200) {
            dispatch(
              authSlice.actions.setUser({
                user: resp.data.user,
                token: resp.data.token,
              })
            )
            toastr.success('An OTP has been sent to your email!')
          }
        })
        .catch((err) => {
          console.error(err)
          setErrors(err.response.data.errors)
          setLoading(false)
        })
    }
  }

My clients have tested on 2 of their Samsung S24s.

Can it be an additional config that S24 requires on POST requests?

[DigitalBrainJS]

@subooom Have you tried removing all the react code and testing a simple axios call with console.log and any public backend like https://httpbin.org/post ? Is there a network console available to see the relevant request status?
Try switching the adapter to fetch for testing purposes.

[Igamingdev1]

Hello,
I am getting some issue in axios.get request.
I am sending Get request on Frontend via axios. and api point changed some on Backend.
But I am always getting old code's response from Backend.

Frontend is React, Backend is Node.js.

How can i fix this issue ?