Question

我想解析一个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数据，然后才能运行几种方法。

有什么主意吗？

谢谢。

Answer 1

好吧，您可以改为使用Promises进行链接，并在遍历链条时使用传递来的数据对该数据进行处理。

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

检索随机图像
因此传递图片网址
该图片网址随后用于预加载图片，并返回图片元素
然后显示图像元素
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中的错误），因此，如果确实出现问题，则应该在控制台中显示错误。

您当然可以利用jQuery提供的$.when语句执行几乎相同的操作，因为它返回了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 );

尽管我真的建议不要使用全局变量。如果在要调用的函数中添加参数，则这些函数将独立于任何不可思议的变量，而可以独立存在

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

请注意，我们并不是在链中自己调用方法，我们只是传递了函数引用，因此可以依次调用（因此：_events与_events()）

如何运行get json并另存为变量，然后在其他方法中使用它

1 个答案: