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

danny 发表于 Dev

丹尼

我想解析一个 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 数据需要在少数方法运行之前准备好。

任何想法？

提前致谢。

冰泡菜

好吧，你可以使用 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>

由于承诺将等待返回的承诺完成（或失败），这一切都是相互的，因此在元素显示之前不会打印日志语句。

当 1 步失败时，它将跳到catch链中的下一个。在我的示例中，只有 1 个捕获（并且我没有处理来自的错误$.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 );

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。