Make sure Axios/Fetch call runs for at least X Seconds in Javascript

Question

odd question. if I wanted to make sure that my query ran for at least X seconds (e.g. 1sec), how would you tackle that? I have React Query that looks like this, but really just need the axios call to have some kind of time tracker on it.

import axios from 'axios';
import { useQuery } from 'react-query';
import { themeKeys } from './themeKeys';
import { webApiBaseUrl, config } from "../apiConstants";

export const fetchTheme = (themeId) =>
    axios.get(`${webApiBaseUrl}/themes/${themeId}`, config)
        .then((res) => res.data);

export default function useTheme(themeId) {
    return useQuery(
        themeKeys.theme(themeId), 
        () => fetchTheme(themeId),
        {
            failureCount: 3,
            retryOnMount: false,
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false,
            cacheTime: Infinity,
            staleTime: Infinity
        }
    );
}

I have something like this adding a delay, but not sure how to track how long the axios call ran for to deduct from the wait

export const fetchTheme = async (themeId) => {
    return axios.get(`${webApiBaseUrl}/themes/${themeId}`, config)
        .then((res) => res.data)
        .then( await wait(750));
};

function wait(ms) {
    return new Promise( (resolve) => {
        setTimeout(resolve, ms);
    });
}

This answer might be helpful: stackoverflow.com/a/51279029/3999660 — Mohammad Tbeishat
– Mohammad Tbeishat, Commented Jun 3, 2021 at 19:39

aleksxor · Accepted Answer · 2021-06-03 19:41:09Z

2

Put both of your promises inside Promise.all. That way if fetch finished first Promise.all will wait for wait to finish.

await Promise.all([fetchTheme(themeId), wait(750)])

answered Jun 3, 2021 at 19:41

aleksxor

8,5001 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul DeVito Over a year ago

I like this, but need to return the response from fetchTheme for this to work. what does promise all return?

aleksxor Over a year ago

const [result, _] = await Promise.all([fetch(), wait()]) it returns an array of resolved results

Collectives™ on Stack Overflow

Make sure Axios/Fetch call runs for at least X Seconds in Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related