拆分JS主函数为多文件后，如何传递变量并返回数据？

看起来你遇到的核心问题是异步操作的Promise没有正确传递，加上模块间的导出导入逻辑没理顺。下面我会一步步帮你改造三个文件，让数据能在模块间正常流转：

1. 改造 query.js：让异步请求返回Promise #

原来的fetch逻辑需要封装成一个可复用的函数，并且返回fetch的Promise链，这样外部才能获取到异步返回的数据。同时把查询语句和变量逻辑也整合进来：

// query.js
export function fetchMediaData(keyword) {
  const season = keyword;
  const date = new Date();
  const localyear = date.getFullYear();
  
  // 根据季节选择对应的查询语句
  let query;
  if (season === "Spring") {
    query = `query ($page: Int, $perPage: Int, $seasonYear: Int, $search: String) { 
      // 你的Spring查询内容
    }`;
  } else if (season === "Summer") {
    // 其他季节的查询语句
    query = `...`;
  }
  // 补充其他季节的判断...

  const variables = {
    page: 1,
    perPage: 10,
    seasonYear: localyear,
    // 其他变量...
  };

  const url = 'myurl';
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 你的其他请求头，比如Authorization等
    },
    body: JSON.stringify({ query, variables })
  };

  // 返回整个Promise链，让外部可以继续处理
  return fetch(url, options);
}

2. 调整 viewdata.js：导出处理函数 #

把数据处理、响应处理和错误处理的函数都导出，方便在main.js里调用：

// viewdata.js
export function handleResponse(response) {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
}

export function handleData(data) {
  const listDataElement = document.querySelector("#data-list"); // 注意这里要加选择器符号，比如#或者.
  if (!listDataElement) {
    console.error("找不到data-list元素");
    return;
  }
  // 清空原有内容，避免重复渲染
  listDataElement.innerHTML = '';
  
  data.data.Page.media.forEach(media => {
    // 你的DOM创建逻辑，比如：
    const item = document.createElement('div');
    item.textContent = media.title?.userPreferred || media.title?.romaji;
    listDataElement.appendChild(item);
  });
}

export function handleError(error) {
  alert('Error, check console');
  console.error(error);
}

3. 重构 main.js：整合模块并处理异步 #

现在在main.js里导入上面两个模块的函数，然后在main函数里处理异步流程：

// main.js
import { fetchMediaData } from './query.js';
import { handleResponse, handleData, handleError } from './viewdata.js';

export function main(keyword) {
  // 调用query.js的异步函数，然后链式处理
  fetchMediaData(keyword)
    .then(handleResponse)
    .then(handleData)
    .catch(handleError);
}

// 如果你需要在页面加载时调用，比如默认传"Spring"
// main("Spring");

关键说明： #

• 为什么原来的方式不行？：原来的fetch操作在query.js里没有返回Promise，main.js无法追踪异步操作的完成状态，自然拿不到数据。现在让fetchMediaData返回fetch的Promise，外部就能通过.then获取到响应了。
• 模块导入导出注意事项：确保你的HTML里引入脚本时加上type="module"，比如：

  <script type="module" src="./main.js"></script>
  

• DOM选择器修正：注意document.querySelector("data-list")应该是#data-list（如果是id）或者.data-list（如果是class），否则找不到元素。

这样改造后，当你调用main("Spring")时，流程就会是：

1. main调用fetchMediaData发起请求
2. 请求成功后，handleResponse解析JSON
3. 解析后的数据传给handleData渲染DOM
4. 任何环节出错都会触发handleError

内容的提问来源于stack exchange，提问作者RA121514