确保 Axios/Fetch 调用在 Javascript 中运行至少 X 秒

Question

奇怪的问题。如果我想确保我的查询至少运行 X 秒（例如 1 秒），你会如何解决这个问题？我有看起来像这样的 React Query，但实际上只需要 axios 调用就可以对其进行某种时间跟踪。

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
        }
    );
}

我有这样的事情增加了延迟，但不知道如何跟踪 axios 调用运行了多长时间以从 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);
    });
}

Answer 1

将你的两个承诺都放在Promise.all 中。这样，如果 fetch 先完成 Promise.all 将等待 wait 完成。

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