我在JS中使用promise是一个相对较新的工作，我在初始主页上使用了API调用，但是当我转到另一个使用相同API调用的页面时遇到了问题。
在我的api.js文件中，我有以下内容：

const key = apiKey;
const commentsUrl = axios.get(`https://project-1-api.herokuapp.com/comments/?api_key=${key}`);
const showsUrl = axios.get(`https://project-1-api.herokuapp.com/showdates?api_key=${key}`);

async function getData() {
    const allApis = [commentsUrl, showsUrl];

    try {
        const allData = await Promise.allSettled(allApis);

        return allData;
    } catch (error) {
        console.error(error);
    }
}

在我的index.html中

import { getData } from "./api.js";

let data = await getData(); //This works and gathers the data from the API.

在我的shows.html中

import { getData } from "./api.js";

let showsData = await getData(); //This does not and says that cannot access commentsUrl (api.js) before it is initialized. But it is?

如果我注解掉“show”中的代码，API GET请求可以正常工作，索引页可以正确加载API数据。有人能给我解释一下发生了什么，为什么我会得到未初始化的错误吗？
我还应该注意到，如果我将API调用拆分到两个单独的js文件（一个用于索引，一个用于显示）中，API调用将按预期工作并显示数据。