javascript - 如何使用 jquery .when 访问 json 数据以附加到页面？

Question

我正在创建该函数，该函数在页面上的数据属性中查找 url，然后找到 data-url 对象，获取该页面的 url，并从该页面访问 json 并将其附加到动态 slider 中。

渲染时数据网址如下所示:

<ul id="data-urls" style="display: none;">

    <li data-number="1" data-title="life-is-light" data-url="/pages/life-is-light"></li>

    <li data-number="2" data-title="our-biodynamics" data-url="/pages/our-biodynamics"></li>

    <li data-number="3" data-title="winemaking" data-url="/pages/winemaking"></li>

    <li data-number="4" data-title="our-land" data-url="/pages/our-land"></li>

    <li data-number="5" data-title="the-people" data-url="/pages/the-people"></li>

</ul>

我创建了一个使用 $.each 循环来启动它的函数，但遇到了将 $.get 中的附加项目添加到随机顺序，而不是根据上面的列表，该列表始终按顺序排列。这是我创建的内容以及导致问题的原因:

$.each( $("#data-urls li") , function () {

  var dataUrl = $(this).attr('data-url');
  var dataTitleObj = $(this).attr('data-title');

  $.get( dataUrl, function( data ) {
$.each(data, function(i, item) {
  var body = data[i].body_html,title = data[i].title,id = data[i].handle,orderNum = data[i].id;
  $('.page-holder').append('<section data-order="" id="'+ id +'" href="#'+ id +'" class="big-stretch active"><figure class="inner"><div class="inner-stretch"><div class="box"><h1 class="">'+ title +'</h1><hr class="style-line"><p class="">'+ body +'</p></div></div></figure></section>');
  timber.largeImageResize();
});



  console.log(data);

  }, 'json').done(function() {

var h1 = $('#life-is-light .inner .inner-stretch h1');
var text = h1.text().split(' ');

for( var i = 1, len = text.length; i < len; i=i+2 ) {
    text[i] = '<span class="italic">' + text[i] + '</span>';
}
h1.html(text.join(' '));

  });

});

这会附加正确的项目，但有时它们在页面刷新时以错误的顺序显示，这不一致。所以我然后想出了使用 $.when 但我正在努力的是在上面的函数上我可以用这个 }, 'json').done(function() { 使用 $.when 没有简单的方法可以做到这一点，当我在上述函数之后执行 console.log(data); 时，我得到这个:

Object {page: Object}
page: Object 
author: "Kat Wiggins"
body_html: "Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
created_at: "2014-11-05T10:51:14-05:00"
handle: "our-biodynamics"
id: 22933611
published_at: "2014-11-05T10:50:00-05:00"
title: "Our Biodynamics"
updated_at: "2014-11-05T10:53:11-05:00"

我想使用的新函数是 $.when:

$.when.apply(null, $.map($("#data-urls li"), function(elm) { return $.get($(elm).data('url')); }) ).then(function(responses) {
    $.each(responses, function(data) {
    });
});

如何使用上述函数获得与原始函数完全相同的效果，而不尝试在页面刷新时重新排序 html，并成功正确获取数据？

Answer 1

你的代码几乎没问题。唯一的问题是，当您将多个 Promise 传递给 $.when 时那么相应的响应将不以数组的形式提供，而是作为单独的参数提供。这就是为什么在您的代码中 responses 确实指的是第一个响应。

尝试以这种方式迭代它们:

var promises = $("#data-urls li").map(function() { 
    return $.get($(this).data('url')); 
});

$.when.apply(null, promises).then(function() {
    var responses = [].slice.call(arguments);
    $.each(responses, function(i, data) {
        console.log(data[0]); // json response
    });
});