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: https://stackoverflow.com/a/51279029/3999660 — Mohammad Tbeishat, Jun 03 '21 at 19:39

score 1 · Accepted Answer · answered Jun 03 '21 at 19:41

1

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 03 '21 at 19:41

aleksxor

7,535
1
22
27

I like this, but need to return the response from `fetchTheme` for this to work. what does promise all return? – Paul DeVito Jun 03 '21 at 19:45
1

const [result, _] = await Promise.all([fetch(), wait()]) it returns an array of resolved results – aleksxor Jun 03 '21 at 19:46

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

1 Answers1