0

我想解析一个 JSON 文件，然后将其数据存储在一个变量中并在代码的不同部分使用它。我认为为此我应该使用$.when().done(). 但是，我不知道如何传递数据。以下代码不是函数，但它显示了我想要实现的目标。

var myJSON;

function _parseJSON() {
  $.getJSON(settings.json_src).done(function(data) {
    return data;
  });
}

$.when(_parseJSON()).done(function() {
  myJSON = data;
});

function _cacheOptions() {
  console.log(myJSON.data);
};
_cacheDom();
_events();
_render();
....

我需要发生以下情况。1- 获取 JSON 2- 将其保存在变量中。3-在代码中提供变量以使用其数据。

至少 JSON 数据需要在少数方法运行之前准备好。

任何想法？

提前致谢。

4

1 回答 1

1

好吧，您可以改用 Promises 进行链接，并在您通过链时使用您传递的数据来处理该数据。

因此，如果您想要一个使用 Promise 的示例实现，并处理传递的数据，您可以查看以下代码：

  • 检索随机图像
  • 结果传递了图像 url
  • 然后使用该图像 url 预加载图像，并返回图像元素
  • 然后显示图像元素
  • 打印了 console.log 语句

function retrieveData() {
  return $.when( $.getJSON('https://dog.ceo/api/breeds/image/random')
    .then( data => data.message ) );
}

function retrieveImage( source ) {
  return new Promise( (resolve, reject) => {
    const image = new Image();
    image.addEventListener( 'load', function() {
      resolve( image );
    } );
    image.src = source;
  } );
}

function displayImage( image ) {
  document.getElementById('image-container').appendChild( image );
  return Promise.resolve( true );
}

retrieveData()
  .then( retrieveImage )
  .then( displayImage )
  .then( () => console.log('all done') )
  .catch( err => console.error( err ) );
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image-container"></div>

由于 promise 将等待返回的 promise 完成（或失败），这一切都在彼此之后进行，因此在元素显示之前不会打印 log 语句。

当 1 步失败时，它将跳转到catch链中的下一个。在我的示例中，只有 1 个 catch （并且我没有处理来自 的错误$.getJSON），因此如果确实出现问题，它应该在控制台中打印一个错误。

你当然可以使用$.whenjQuery 提供的语句来做几乎相同的事情，因为它返回一个Promise

所以应用于你的代码，你应该return从$.getJSON你的解析函数中，然后基于它链接

var myJSON;

function _parseJSON() {
  // return here, no need returning exactly what you would expect anyhow
  return $.getJSON(settings.json_src);
}

// because you returned, you can chain everything nicely together
$.when( _parseJSON() )
  // don't forget the argument here
  .then(function( data ) { myJSON = data; })
  // and these will only run after the myJSON got set
  .then( _cacheOptions )
  .then( _cacheDom )
  .then( _events )
  .then( _render );

虽然我真的建议不要使用全局变量。如果你给你正在调用的函数添加参数，这些函数将独立于任何神奇的变量，而是可以独立存在

请注意，如果您的任何链返回延迟对象，它将等待该延迟对象完成。

注意我们不是自己调用链中的方法，我们只是传入函数引用，所以可以按顺序调用（so: _eventsvs _events()）

于 2019-05-19T22:19:45.967 回答