axios post hanging

OK I am literally pulling my hair out! I have a Laravel backend and am making some calls from Vue to it using axios. In this case a POST

I'm building some tests (using vitest) and for some reason if I make the call using axios.post/then/catch it works fine. If I use await axios.post it hangs.

The code is below.

I have tried everything I can think of. Interestingly if I use some axios interceptors I can see the second request gets started but it never seems to get to my Laravel back end...

I welcome any thoughts cos I am STUMPED.

    let doingIt = true;
    axios.post('http://localhost/api/saveTodoItem', apiData, options)
        .then((response) => {
            console.log('.then function');
            console.log(response);
            doingIt = false;
        })
        .catch(error => {
            console.log('Catch error');
            console.log(error);
            doingIt = false;

        });

    await vi.waitFor(async () => {
        if (doingIt == true) {
            throw new Error('still processing job');
        }

        console.log('Job completed');
    },
        {
            timeout: 15000,
            interval: 500
        })

    console.log('OK NEXT TEST');

    try {
        let resp = await axios.post('http://localhost/api/saveTodoItem', apiData, options);

        console.log('2nd returned');
        console.log(resp);
    } catch (error) {
        console.log('2nd did not work');
        console.log(error);
    }

If it helps I am returning a response from Laravel like this

        return response()->json([
            'success' => 0,
            'message' => 'Todo Insert Failed - Widget not found',
        ],
            400);

LaryAI

2 years ago

Level 58

It seems like you're mixing two different styles of handling asynchronous code: using .then()/.catch() and await. When using await, you should not use .then() or .catch() because await will pause the execution until the promise is resolved or rejected, and you should handle the response or error with try/catch.

Here's how you can refactor your code to use await properly:

async function postTodoItem() {
    try {
        // This will wait for the axios post request to complete before moving on.
        let response = await axios.post('http://localhost/api/saveTodoItem', apiData, options);
        console.log('Response from first request:', response);
    } catch (error) {
        console.error('Error in first request:', error);
    }

    // No need to use vi.waitFor here since await already waits for the promise to resolve.

    console.log('OK NEXT TEST');

    try {
        // This will wait for the second axios post request to complete before moving on.
        let resp = await axios.post('http://localhost/api/saveTodoItem', apiData, options);
        console.log('Response from second request:', resp);
    } catch (error) {
        console.error('Error in second request:', error);
    }
}

// Call the function
postTodoItem();

Make sure that your function is declared with async to use await inside it. This code will execute the first POST request and wait for it to complete before logging the response or error. Then it will proceed to the next test and do the same for the second POST request.

If your second request is still hanging, it could be due to several reasons:

The server might not be handling concurrent requests properly.
There might be an issue with the network or the URL you are trying to reach.
The request might be taking longer than expected, and you might need to increase the timeout.

Make sure to check your Laravel logs for any errors and ensure that your server is configured to handle concurrent requests if necessary. Also, verify that your apiData and options are correctly formatted and that the server is capable of processing them.

gych

2 years ago

Level 29

Is your test method async ?

nyrsimon

2 years ago

Level 1

Yes it is async...

it('puts a SaveTodo Job on the queue and it fails', async () => {...}

nyrsimon

2 years ago

Level 1

OK, after stripping it all down I found the issue. I was using faketimers: vi.useFakeTimers();

This causes axios to have issues. I removed them from the tests and all magically worked.

I hope this helps somebody!

Please or to participate in this conversation.