Возврат ajax-ответа по шаблону модуля JS

Question

ОБНОВЛЕНИЕ: Я решил, что использование шаблона модуля JS не было «простым в использовании», поэтому я отказался от него и использовал отложенный объект jQuery для возврата данных, которые я искал. Мне действительно нужно было просто загрузить файл JSON и заполнить объект. Я просто пытался быть слишком фантастическим, включив JS Module Pattern.

Большое спасибо @kiramishima за правильный ответ.

Ниже готовый код:

function getData(){ 
    var url = CONTEXT + "/json/myJsonFile.json"; 
    return $.getJSON(url); 
} 

getData() 
    .done(function(data){ 
     myGlobalObj = data; 
    }) 
    .fail(function(data){ 
     console.log("fetching JSON file failed"); 
    }); 

Я думаю, что я получаю немного слишком фантазии для собственного блага здесь. Я загружаю файл JSON и пытаюсь вернуть API через шаблон модуля JS. Проблема в том, что я считаю, что не выполняю обещание правильно, и я не знаю, как это исправить.

Вот мой JSON:

{ 
    "result": { 
     "one": { 
      "first_key":"adda", 
      "second_key":"beeb", 
      "third_key":"cffc" 
     }, 
     "two": { 
      "first_key":"adda", 
      "second_key":"beeb", 
      "third_key":"cffc" 
     } 
    } 
} 

А вот моя реализация JS Модуль:

var data = (function() { 
    var url = "/json/dummy.json"; 
    var getAllData = function() { 
     return $.getJSON(url, function(result){}); 
    }; 

    var promise = getAllData(); // the promise 

    return { 
     getFirstObjSecondKey:function() { 
      return promise.success(function(data) { 
       return data.result.one.second_key; 
      }); 
     }, 
     getSecondObjThirdKey:function() { 
      return promise.success(function(data) { 
       return data.result.two.third_key; 
      }); 
     }, 
    }; 
})(); 

Проблема заключается в том, что "getAllData()" возвращается как неопределенные, и я не знаю, почему ; этот метод возвращает обещание, которое я должен обработать в функции «done». Как далеко я?

Спасибо за любой полезный ввод. Это первый раз, когда я возился с шаблоном модуля JS.

Answer 1

Я не знаю, что это ваша проблема, но я тестирую с:

var getAllData = function() { 
return $.getJSON('/json/dummy.json', function(result){}) 
} 

getAllData().done(function(data){ console.log(data.result.one.second_key) }) // prints beeb 

отлично работает в этом случае, но если попробовать это:

var data = (function() { 
    var url = '/json/dummy.json'; 
    var getAllData = function() { 
     return $.getJSON(url, function(result){}); 
    }; 

    return { 
     getFirstObjSecondKey:function() { 
      getAllData().done(function(data) { 
       return data.login; 
      }); 
     }, 
     getSecondObjThirdKey:function() { 
      getAllData().done(function(data) { 
       return data.name; 
      }); 
     }, 
    }; 
})(); 

data.getFirstObjSecondKey возвращает неопределенное значение, то может u пропускает анонимную функцию:

var data = (function() { 
     var url = '/json/dummy.json'; 
     var getAllData = function() { 
      return $.getJSON(url, function(result){}); 
     }; 

     return { 
      getFirstObjSecondKey:function(callback) { 
       getAllData().done(function(data) { 
        callback(data.result.one.second_key); 
       }); 
      }, 
      getSecondObjThirdKey:function(callback) { 
       getAllData().done(function(data) { 
        callback(data.result.two.third_key); 
       }); 
      }, 
     }; 
    })(); 
var t; 
data.getFirstObjSecondKey(function(data){ 
//data should contain the object fetched by getJSON 
console.log(data); // prints beeb 
t = data; // assign t 
}) 
console.log(t) // prints beeb 

Другое решение, всегда возвращает объект отложенных

Answer 2

Ответ kiramishima работает, но он смешивает обратные вызовы с Promise s. Если вы используете обещания, вы должны стараться не смешивать оба стиля.

Вы должны вернуть Promise из своих функций. Помните, что обещания могут быть соединены, то есть, если вы возвращаете Promise из функции done, что становится новым Promise

var data = (function() { 
    var url = "/json/dummy.json"; 
    var getAllData = function() { 
     return $.getJSON(url, function(result){}); 
    }; 

    return { 
     getFirstObjSecondKey:function() { 
      return getAllData().done(function(data) { 
       return new Promise(function(resolve, reject){ 
        resolve(data.result.one.second_key); 
       }); 
      }); 
     }, 
     getSecondObjThirdKey:function() { 
      return getAllData().done(function(data) { 
       return new Promise(function(resolve, reject){ 
        resolve(data.result.one.third_key); 
       }); 
      }); 
     }, 
    }; 
})(); 

data.getFirstObjSecondKey().done(function(secondKey) { 
    console.log('Second key', secondKey); 
});