javascript - 如何运行 get 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

好吧，您可以使用 Promise 进行链接，并使用您传递的数据在遍历链时对这些数据执行某些操作。

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

• 检索随机图像
• 传递图像网址作为结果
• 然后使用该图像 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 完成(或失败)，所以这一切都在彼此之后进行，因此在显示元素之前不会打印日志语句。

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

您当然可以使用 $.when jQuery 提供的语句几乎做同样的事情，因为它返回 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 vs _events() )