javascript - RequireJS 模块中的 XMLHttpRequest()

Question

全部。我正在开发一个基于浏览器的 RPG，以供娱乐和编程教育。我最近学习了 RequireJS——这太棒了——但是在我将代码修改为 AMD 的过程中，我遇到了一个应用程序中断问题。

在我最初的实现中，我使用了一个请求，通过对文件的调用XMLHttpRequest()从我的服务器获取玩家选择的英雄。调用很棒，但我在回调函数的时间和游戏的继续上苦苦挣扎——即游戏在回调之前继续，这会导致错误。GETGetHero.phpAsynchronous

我的问题是： 1) 如何让游戏等待 XMLHttpRequest() 返回值，然后再转到下一个代码块？2) 我应该在我的 RequireJS AMD 中何时执行此功能？

我尝试在函数中关闭异步.open()，但由于 RequireJS 使用类似的调用，我认为它不像在我的代码的同步执行中那样工作。我还省略了大部分代码以隔离特定问题并提高可读性。

提前感谢任何愿意帮助我理解这一点的人！

main.js

require.config({
  baseUrl: "assets/js",
  deps: ["game"],
  paths: {
    jquery: "lib/jquery-3.3.1.min",
    bootstrap: "lib/bootstrap.min",
    game: "game",
    hero: "models/hero",
    getHero: "models/getHero",
    stats: "models/stats",
    heroClasses: "models/heroClasses"
  },
  shim: {
    bootstrap: ["jquery"]
  }
});

游戏.js

define(["hero", "bootstrap"], function (h) {
  Hero = h;
  console.log(Hero);
  console.log(Hero.Stats.Get("str"));
  console.log(Hero.Stats.GetInfo()); // <==== this fails
});

hero.js

define(["stats"], function (s) {
  Stats = s;
  return {
    Stats: Stats
  };
});

stats.js

define(["getHero"], function(myHero) {

  var Info = myHero; // returns hero obj "{ name: "Hero", level: 1, etc..}"

  var _HeroClasses = heroClasses;

  var _GetInfo = function (arr) {
    return Info;
  };

  return {
    GetInfo: _GetInfo
  };
});

getHero.js

define([], function () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            return myObj;
        }
    };
    xmlhttp.open("GET", "/game/assets/php/GetHero.php", false);
    xmlhttp.send();
});

GetHero.php

<?php
// TODO create MYSQL call to load hero
echo '{ "id": 0, "name": "Ryan", "classId": 0, "level": 50, "exp": 251 }';

?>

更新的代码：（工作，但可能是一个丑陋/糟糕的解决方案）

-- game.js（更新）

var a = new Promise(function (resolve, reject) {
    document.getElementById("message").innerHTML = "Loading...";
    Hero = h;
    resolve(true);
  });
  a.then(function() {
    Hero.Stats.GetInfo();
    document.getElementById("message").innerHTML = "Ready";
  })
  .catch(function(err) {
    console.error('There was an error 2!', err.statusText);
  });

-- getHero.js（更新）

define([], function () {
  return function (method, url) {
    return new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.onload = function () {
        if (this.status >= 200 && this.status < 300) {
          resolve(xhr.response);
        } else {
          reject({
            status: this.status,
            statusText: xhr.statusText
          });
        }
      };
      xhr.onerror = function () {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      };
      xhr.send();
    });
  };
});

标签： javascriptphprequirejslamp