Как синхронно загрузить JSON в JavaScript?

Question

Я пытаюсь построить игру на HTML5, но столкнулся с проблемой. Я пытаюсь разработать игру так, чтобы она была модульной; Мой способ сделать это - загрузить JSON-файл с различными модулями для загрузки.

Код, который я пробовал

var resources = {};

$.ajaxSetup({
  async: false
});

$.getJSON('res/gen/generators.json', function (data) {
  resources.generators = data;
});

for (let generator in resources.generators) {
  $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
}

$.ajaxSetup({
  async: true
});

Файл JSON

{
  "memoryless": {
    "folder": "memoryless",
    "name": "Memoryless",
    "description": "Generates a piece with no regard to the previous history."
  }
}

К сожалению, я получаю сообщение об ошибке: «[Устаревание] Синхронный запрос XMLHttpRequest в основном потоке устарел из-за его пагубного влияния на работу конечного пользователя. Для получения дополнительной помощи проверьте https://xhr.spec.whatwg.org/.",, но я не не хочу, чтобы любой другой код работал до тех пор, пока они не загрузятся. Что мне делать?

Answer 1

Борьба с асинхронной природой JavaScript приведет к «нехорошему» опыту разработки. Охватите асинхронность.

Здесь мы начинаем вкладывать обещания и обратные вызовы:

var resources = {};

$.getJSON('res/gen/generators.json', function (data) {
  resources.generators = data;

  $.when(Object.keys(resources.generators).map(function(generator) { 
    return $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
  }).then(function() {
    ...do other stuff
  })
});

В качестве альтернативы вы можете использовать async / await :

(async () => {
  var resources = {}
  resources.generators = (await $.getJSON('res/gen/generators.json')).data;

  for (let generator in resources.generators) {
    await $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
  }
  ...do other stuff
})()

И в качестве другой альтернативы, вы можете отказаться от своей системы пользовательских модулей и использовать стандартные Модули JavaScript :

import memoryless from "res/gen/memoryless/script.js"