javascript - 为什么我似乎需要 Promise 和回调来将 JSON 数据公开给全局变量？

Question

据我了解，要将获取的 JSON 数据公开给全局变量，我需要使用 Promise 或回调函数。我的代码可以工作，但它同时使用...

我正在使用 jQuery 的 .done 创建一个 Promise，我想在 .done 中实例化我的 nowNext() 函数。难道 .done 中的代码不应该只在返回 Promise(即 JSON 数据)后才执行吗？

如果我此时调用 nowNext() 并记录我的 timeObj 它是一个空对象，但是如果我实例化 timeCall() .done 中的回调函数然后实例化 nowNext() 我的 timeObj 获取 JSON 数据。

// define the timeObj globally so the returned JSON can be stored

var timeObj = {};

// function gets JSON feed, argument specifies which object within feed to target

function nowTime(i){

    $.getJSON("feed.json", function(data) {
        console.log('getting JSON...')      
    })

    // a promise only to be executed once data has been fetched
    .done(function(data) { 
        // timeData is whichever JSON object targeted in argument
        timeData = data.programme[i],

        // Start building the timeObj with this data
        timeObj = {
            title:        timeData.title,
            startTime:    timeData.start
        }

        // timeCall instantiates the nowNext function only  
        // once the timeObj has all it's key/values defined
        // directly calling nowNext at this point logs timeObj as an empty object...
        timeCall();
    })

    .fail(function() {
      console.log( "error" );
    })
};

// instantiate nowTime to fetch data of current/now programme 
$(function(){ 
    nowTime(0) 
})

// callback so that when nowNext is instantiated
// nowTime has already fetched timeObj data
function timeCall(){
    nowNext();
}

function nowNext() {
    console.log(timeObj)
}

正在获取的 JSON 数据的示例:

//////// feed.json ////////

{
   "programme" : [
      {
         "title" : "Rick & Morty",
         "startTime" : "19:00",
      },
      {
         "title" : "News",
         "startTime" : "19:30",
      }
  ]
}

Answer 1

您应该避免全局变量。当您开始进行异步调用时，您需要确保以下所有代码都通过回调/Promise 链发生，并尽可能将变量作为参数传递。

我的首选解决方案是:

function nowTime(i){   
    return $.getJSON("feed.json", function(data) {  // NB: return
        console.log('getting JSON...')      
    }).then(function(data) { 
        // timeData is whichever JSON object targeted in argument
        timeData = data.programme[i],

        // Start building a timeObj with this data
        return {
            title:        timeData.title,
            startTime:    timeData.start
        }
    });
};

function nowNext(timeObj) {
    ...
}

$(function(){ 
    nowTime(0).then(nowNext).fail(...); 
});

通过让 .done 回调实际返回您需要的数据子集(尽管仍然封装在 Promise 中)，然后通过 .then 调用 nowNext ，您确保数据自动沿着 promise 链传递。

还请注意，错误处理也是通过 Promise 链完成的 - 如果 nowTime 函数返回拒绝的 Promise(或引发异常)，则以下 .then 调用为自动跳过，代码将进入 .fail 处理程序。