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

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 进行链接，并在您通过链时使用传递的数据对该数据执行某些操作。

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

检索随机图像
作为结果通过图像 url
该图像 url 然后用于预加载图像，并且 return 图像元素
然后显示图像元素
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 将等待 returned promise 完成（或失败），这一切都在彼此之后进行，因此在显示元素之前不会打印日志语句。

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

您当然可以使用 jQuery 提供的 $.when 语句来做几乎相同的事情，因为它 return 是 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 );

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

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

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

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

How to run get json and save as a variable, then use it in other methods

javascript

jquery

json

chaining

when-js

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

How to run get json and save as a variable, then use it in other methods

javascript

jquery

json

chaining

when-js

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