XMLHttpRequest () внутри модуля RequireJS - PullRequest
Новая
       11

XMLHttpRequest () внутри модуля RequireJS

0 голосов
/ 16 мая 2018

все.Я работаю над браузерной RPG для развлечения и обучения программированию.Недавно я выучил RequireJS, что удивительно, но во время пересмотра моего кода для AMD я столкнулся с ошибкой приложения.

В своей первоначальной реализации я использовал запрос XMLHttpRequest(), чтобы выбрать игрокагерой с моего сервера через GET вызов файла GetHero.php.Asynchronous вызовы отличные, но я боролся с выбором времени функции обратного вызова и продолжением игры, т. Е. Игра продолжается до обратного вызова, что приводит к ошибке.

Мои вопросы: 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"]
  }
});

game.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();
    });
  };
});
...