jQuery отложенная ошибка: не может прочитать свойство then для неопределенного

Question

Я пытаюсь кэшировать значения массива перед использованием его во всей моей программе. Я использую jQuery отложенные объекты. Я думал, что понял концепцию, но, похоже, мне не хватает части головоломки. Пожалуйста, смотрите код ниже. Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'then' of undefined '

Что я делаю не так?

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];


getSubNavData();
getMegaMenuData();
getCategoryMenuData();

function getNavData(){
     var dfd = jQuery.Deferred();
  console.log(dfd)

     setTimeout(function(){ 
      cacheNavData[0] = "Soup";
      cacheNavData[1] = "Sandwich";
      cacheNavData[2] = "Rice";

     return dfd.resolve(cacheNavData);
     }, 3000);
 }

 function getSubNavData(){
     var dfd = jQuery.Deferred();

     setTimeout(function(){ 
      cacheSubNavData[0] = "Apple";
      cacheSubNavData[1] = "Beans";
      cacheSubNavData[2] = "Carrot";

      return dfd.resolve(cacheSubNavData);
    }, 3000);
 }

 function getMegaMenuData(){
     var dfd = jQuery.Deferred();

      setTimeout(function(){ 
      cacheMegaMenuData[0] = "Donkey";
      cacheMegaMenuData[1] = "Eagle";
      cacheMegaMenuData[2] = "Frog";

      return dfd.resolve(cacheMegaMenuData);
     }, 3000);
}

function getCategoryMenuData(){
     var dfd = jQuery.Deferred();

     setTimeout(function(){ 
      cacheCategoryMenuData[0] = "Grapes";
      cacheCategoryMenuData[1] = "Hand";
      cacheCategoryMenuData[2] = "Igloo"; 

     return dfd.resolve(cacheCategoryMenuData);
     }, 3000);
 }

 function createNavigation(){
   console.log("All arrays have been populated.  Let's build the navigation.")
 }

var promise = getNavData();

promise.then(getSubNavData).then(getMegaMenuData).then(getCategoryMenuData).done(function(){
  createNavigation();

 console.log(cacheNavData);
 console.log(cacheSubNavData);
 console.log(cacheMegaMenuData);
 console.log(cacheCategoryMenuData);
})

pen

Answer 1

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];


getSubNavData();
getMegaMenuData();
getCategoryMenuData();

function getNavData(){
     var dfd = jQuery.Deferred();
  

     setTimeout(function(){ 
      cacheNavData[0] = "Soup";
      cacheNavData[1] = "Sandwich";
      cacheNavData[2] = "Rice";

      dfd.resolve(cacheNavData);
     }, 3000);
  return dfd;
 }


 function getSubNavData(){
     var dfd = jQuery.Deferred();

     setTimeout(function(){ 
      cacheSubNavData[0] = "Apple";
      cacheSubNavData[1] = "Beans";
      cacheSubNavData[2] = "Carrot";

       dfd.resolve(cacheSubNavData);
    }, 3000);
   return dfd;
 }

 function getMegaMenuData(){
     var dfd = jQuery.Deferred();

      setTimeout(function(){ 
      cacheMegaMenuData[0] = "Donkey";
      cacheMegaMenuData[1] = "Eagle";
      cacheMegaMenuData[2] = "Frog";

       dfd.resolve(cacheMegaMenuData);
     }, 3000);
   return dfd;
}

function getCategoryMenuData(){
     var dfd = jQuery.Deferred();

     setTimeout(function(){ 
      cacheCategoryMenuData[0] = "Grapes";
      cacheCategoryMenuData[1] = "Hand";
      cacheCategoryMenuData[2] = "Igloo"; 

      dfd.resolve(cacheCategoryMenuData);
     }, 3000);
  return dfd;
 }

 function createNavigation(){
   console.log("All arrays have been populated.  Let's build the navigation.")
 }

var promise = getNavData();

promise.then(getSubNavData).then(getMegaMenuData).then(getCategoryMenuData).done(function(){
  createNavigation();

 console.log(cacheNavData);
 console.log(cacheSubNavData);
 console.log(cacheMegaMenuData);
 console.log(cacheCategoryMenuData);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Думаю, вы пропустили возвращение обещания: -

function getNavData(){
 var dfd = jQuery.Deferred();


 setTimeout(function(){ 
  cacheNavData[0] = "Soup";
  cacheNavData[1] = "Sandwich";
  cacheNavData[2] = "Rice";

 return dfd.resolve(cacheNavData);
 }, 3000);
 return dfd;
}