第一次使用 Promise.all 并且在显示 JSON 时遇到了一些问题答案

【问题标题】：First time using Promise.all and have a few problems getting JSON to display第一次使用 Promise.all 并且在显示 JSON 时遇到了一些问题
【发布时间】：2017-04-25 16:36:39
【问题描述】：

我有 2 个文件，JavaScript 和 HTML。我正在尝试从 3 个 url 获取数据并在我的 HTML 中显示标题。我相信我有大部分，但我无法让数据显示。

我正在尝试打印 HTML 页面中的所有标题对象。

我在控制台中收到此错误

example.js:24 Uncaught ReferenceError: items is not defined
    at HTMLAnchorElement.<anonymous> (example.js:24)
    at HTMLAnchorElement.dispatch (jquery-1.9.1.min.js:3)
    at HTMLAnchorElement.v.handle (jquery-1.9.1.min.js:3)

我的 HTML

<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.js"></script>
  <script>
    $(document).ready(function() {
      var showData = $('#show-data');

      $.getJSON('data.json ', function(data) {

        var items = data.map(function(item) {
          return item.title;
        });

        if (items.length) {
          var content = '<li>' + items.join('</li><li>') + '</li>';
          var list = $('<ul />').html(content);
          showData.append(list);
        }
      });


    });
  </script>
</head>

<body>
  <a href="#" id="get-data">get data</a>
  <div id="show-data"></div>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="example.js"></script>
</body>
</html>

我的 JavaScript

$(document).ready(function() {

  var first = 'https://1';
  var second = 'https://2';
  var third = 'https://3';

  Promise.all([
    $.getJSON(first),
    $.getJSON(second),
    $.getJSON(third)
  ]).then(function(data) {

    $('#get-data').click(function() {
      var showData = $('#show-data');
      $.getJSON(first, function(data) {
        showData.empty();
        var items = data.map(function(elem) {
          return $("<li />", {
            text: elem.title
          });
        });
      })

      var list = $('<ul />').append(items);
      showData.append(list);
    });
  });
});

【问题讨论】：

items 是在内部 getJSON 回调中定义的，在点击发生之前不会被调用。在then() 中添加点击监听器也没有多大意义。需要解释你到底想在这里做什么
好的，有没有简单的方法来修复我的代码？
为什么你在 then 里面有这个$('#get-data').click(function() {
另外，你为什么又调用`$.getJSON(first)`？
想一想，承诺兑现后，会发生什么？

标签： javascript jquery json api

【解决方案1】：

忽略没有多大意义的嵌套点击，您可能想要更多类似的东西：

var showData = $('#show-data'),
  urls = ['data.json', 'data2.json', 'data3.json'],
  // map url array to array of ajax promises
  requests = urls.map((url) => $.getJSON(url));

Promise.all(requests).then(processData);

function processData(data) {
  console.log(data) // array of arrays
  showData.empty();
 // flatten array of arrays to array of jQ objects
  var items = data.reduce(function(a, c) {
    var elems = c.map(function(elem) {
      return $("<li />", {
        text: elem.title
      });
    })
    return a.concat(elems)
  }, []);

  var list = $('<ul />').append(items);
  showData.append(list);
}

DEMO

【讨论】：