RequireJS模块中XMLHttpRequest异步同步问题及执行时机问询

我太懂你现在的纠结了——用RequireJS重构AMD规范后，异步请求的回调时机完全跟不上游戏流程，导致游戏还没拿到英雄数据就急着往下跑，直接报错崩溃。咱们一步步拆解问题，同时把你的代码优化得更优雅些。

问题1：如何让游戏等待XMLHttpRequest返回结果后再执行后续代码？ #

首先绝对别用同步XMLHttpRequest！它不仅会卡死浏览器主线程、拖慢体验，现代浏览器对同步XHR还有诸多限制，而且会和RequireJS的异步加载机制打架，完全得不偿失。

正确的姿势是用Promise封装异步请求，通过then()链式调用确保后续代码只在数据返回后执行。你已经尝试用Promise改造了，思路完全正确，只是可以把Promise逻辑更深地整合到RequireJS的模块体系里，而不是在game.js里单独写一段。

问题2：在RequireJS AMD结构中应何时执行该请求函数？ #

应该把数据请求逻辑封装在对应的模型模块（比如getHero.js）里，让这个模块返回一个Promise对象——当异步请求完成并拿到英雄数据后，Promise就会resolve。然后依赖它的模块（比如stats.js、hero.js）可以通过Promise的then()来处理数据，最后在game.js里等待所有依赖的异步操作完成后，再启动游戏主流程。

优化后的完整代码示例 #

1. getHero.js：封装异步请求为Promise模块

define([], function () {
  // 返回一个Promise，加载完成后resolve英雄数据
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/game/assets/php/GetHero.php");
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        try {
          const heroData = JSON.parse(xhr.response);
          resolve(heroData);
        } catch (err) {
          reject(new Error("解析英雄数据失败：" + err.message));
        }
      } else {
        reject(new Error(`请求失败：${this.status} ${xhr.statusText}`));
      }
    };
    xhr.onerror = function () {
      reject(new Error("网络请求错误"));
    };
    xhr.send();
  });
});

2. stats.js：依赖getHero的Promise，返回处理后的统计模块

define(["getHero"], function(heroPromise) {
  // 等待英雄数据加载完成后，返回Stats模块
  return heroPromise.then(heroData => {
    const _GetInfo = function() {
      return heroData;
    };

    // 补充你需要的Get方法（比如按属性名取数值）
    const _Get = function(statKey) {
      // 假设heroData里有对应的小写属性名，比如strength对应str
      return heroData[statKey.toLowerCase()] || 0;
    };

    return {
      GetInfo: _GetInfo,
      Get: _Get
    };
  }).catch(err => {
    console.error("加载Stats模块失败：", err);
    throw err; // 向上抛出错误，让上层模块处理
  });
});

3. hero.js：依赖stats的Promise，返回Hero模块

define(["stats"], function(statsPromise) {
  return statsPromise.then(stats => {
    return {
      Stats: stats
    };
  });
});

4. game.js：等待Hero模块加载完成后执行游戏逻辑

define(["hero", "bootstrap"], function(heroPromise) {
  document.getElementById("message").innerHTML = "Loading...";
  
  // 等待Hero模块（包含异步加载的Stats和英雄数据）准备好
  heroPromise.then(Hero => {
    document.getElementById("message").innerHTML = "Ready";
    console.log(Hero);
    console.log(Hero.Stats.Get("str"));
    console.log(Hero.Stats.GetInfo());
    // 在这里启动游戏的主流程，比如渲染英雄、加载关卡等
  }).catch(err => {
    document.getElementById("message").innerHTML = "加载失败";
    console.error("游戏初始化失败：", err);
  });
});

为什么这样更优雅？ #

• 把异步逻辑完全封装在模块内部，符合AMD的模块化思想，模块间的依赖关系清晰明了。
• 彻底告别全局变量（你原来的代码里用了全局的Hero、Stats，这在模块化开发里是大忌）。
• 错误处理更完善，每个模块的错误都能被捕获和处理，不会直接导致整个游戏崩溃。
• 完全利用Promise的异步特性，不会阻塞浏览器主线程，用户体验更流畅。

关于你原来的尝试 #

你用Promise的思路是对的，但原来的写法把Promise逻辑放在了game.js的顶层，没有和RequireJS的模块依赖结合起来，导致模块之间的异步关系混乱。上面的优化方案把Promise整合到模块定义中，让RequireJS自动处理模块的异步依赖，代码结构更整洁，也更符合模块化开发的最佳实践。

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