Загрузить JSON-файл с модульным представлением javascript-подхода

Я пытаюсь реализовать подход модульного представления для вызова файла json в моем коде javascript, но не могу исправить проблему. Код, в котором я вызываю файл json, представляет собой отдельный файл js, который выглядит следующим образом:

var fileConfigModule = (function () {

  var arData = {};

  function init() {
    loadJSON(function (json) {
      arData = json
    });
    return arData 
  }
  // Let's hide this function

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', './data.json', true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        arVals= callback(JSON.parse(xobj.responseText));
      }
    };
    xobj.send(null);
  }

  return {
    loadJSON: loadJSON,
    init: init
  }
})();

Я хочу использовать этот модуль в своем основном файле, чтобы загрузить json из файла, например, aysnc. Это использует функцию обратного вызова.

var arData = fileConfigModule.init();

Пожалуйста, если кто-то может помочь, что я делаю неправильно здесь. Большое спасибо

javascript json asynchronous modular

26.02.2019 12:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы вызываете асинхронную функцию, но ожидаете возвращаемого значения в качестве функции синхронизации.

Обновите свой код, как показано ниже,

var fileConfigModule = (function () {

  function init(callback) {
    loadJSON(function (json) {
      callback(json);
    });
  }
  // Let's hide this function

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', './data.json', true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(JSON.parse(xobj.responseText));
      }
    };
    xobj.send();
  }

  return {
    loadJSON: loadJSON,
    init: init
  }
})();

И позвоните, как показано ниже,

var arData = null;
fileConfigModule.init(function(data){
  arData = data;
});

Я не знаю, почему вы пытаетесь скрыть функцию loadJSON. Но я думаю, что вы должны напрямую использовать функцию loadJSON вместо вызова функции init.

Звоню loadJSON,

var arData = null;
fileConfigModule.loadJSON(function(data){
  arData = data;
});

Это работает для меня отлично. Можете ли вы объяснить мне немного больше, почему это работает, почему у вас есть дополнительный звонок для обратного звонка? И как мне напрямую вызвать функцию loadJSON в подобном примере? или как лучше это написать?

— 26.02.2019 13:48

Я обновил свой ответ вызовом функции loadJSON.

— 26.02.2019 13:52

Большое спасибо. Я пытаюсь понять функции обратного вызова и то, как они работают.

— 26.02.2019 14:13

Это может вам помочь: codeburst.io/….

— 26.02.2019 14:15

26.02.2019 13:14