jQuery延迟错误:无法读取udefined的属性'then'

在将数组用于整个程序之前,我试图缓存数组的值。我使用jQuery延迟对象。我以为我理解了这个概念,但看起来我可能遗漏了一块拼图。请查看下面的代码。我得到错误: Uncathed TypeError:无法读取undefined的属性'then'

我做错了什么?

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