javascript - 调用两个相互依赖但没有异步的 ajax 调用

Question

我正在从两个 REST API 创建动态菜单。菜单将根据父/子关系创建。这意味着父ajax响应的id将传递给子ajax以获取子记录。

问题是，当我对我的子 ajax 调用使用 async false 时，我的网站变得很慢，当我删除它时，我的菜单不会呈现。对此有一些帮助。

我的代码家长通话

var url;
url = "/_api/lists/getbytitle('GlobalTopNavMenu')/items?$select=Id,Title,Image,hasSubMenu,Link&$filter=Location eq 'GlobalNavigation'";
html = "<ul class='nav navbar-nav nav-topmrgn'>";
$.ajax({
  url: url,
  method: "GET",
  headers: {
    "Accept": "application/json; odata=verbose"
  },
  success: function(data) {
    $.each(data.d.results, function(i, item) {
      if (item.hasSubMenu == "Yes") {
        html += "<li class='dropdown yamm-fw borderLeftY'><a href='#' title='' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>" + Res[item.Title] + "<b class='caret'></b></a>";
        html += getSubMenu(item.Id) + "</dl>";
        html += "<dl class=''><dd class='picHolder'><img alt='' src='/PublishingImages/" + item.Image + "'/></dd></dl></div></div></li></ul></li>";
      } else
        html += "<li class='yamm-fw borderLeftY'><a href='" + item.Link + "' title='' class='dropdown-toggle' role='link' aria-haspopup='true' aria-expanded='false'>" + Res[item.Title] + "</a></li>";
    })
    html += "</ul>";
    $("#navbar").empty();
    $("#navbar").append(html);
  }
});

子电话

function getSubMenu(id) {
  var url = "/_api/lists/getbytitle('GlobalSubNavMenu')/items?$select=Id,Title,Link,ParentMenu/Id,root&$filter=ParentMenu/Id eq " + id + "&$expand=ParentMenu/Id";
  var html = "";
  $.ajax({
    url: url,
    method: "GET",
    async: false,
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
      if (data.d.results.length < 6)
        html += "<ul class='dropdown-menu width500 spaceLeft'>"; //
      else
        html += "<ul class='dropdown-menu width800 spaceLeft'>";
      html += "<li><div class='yamm-content'><div class='row'><dl class='col-sm-3 mega-menu colborderRight'>";
      $.each(data.d.results, function(i, item) {
        if (i !== 0 && i % 6 == 0)
          html += "</dl><dl class='col-sm-3 mega-menu colborderRight'><dd class=''><a href=/" + (item.root ? "" : lang) + item.Link + ">" + Res[item.Title] + "</a></dd>";
        else
          html += "<dd class=''><a href=/" + (item.root ? "" : lang) + item.Link + ">" + Res[item.Title] + "</a></dd>";
      });
    }
  });
  return html;
}

如果我从子函数中删除 async false ，菜单将不会呈现。那么我该如何做到这一点。

Answer 1

使用 async: false 时，getSubMenu() 是异步的，因此，

• getSubMenu() 必须返回一个 promise (好的做法)或接受回调(不好的做法)，
• 依赖于从 getSubMenu() 获取的数据的代码必须进行相应的分解。

这不是使用异步派生数据的最简单的介绍，特别是因为 getSubMenu() 是从循环内调用的。

您需要了解以下内容:

• jQuery.ajax() 返回一个 Promise，允许您链接 .then()。在解决这个问题时，您将受益于 .then() 相对于“success:”回调的额外功能。
• Array#map() 将数组映射到您喜欢的任何新数组。这里 Array#map() 在创建 getSubMenu() 返回的 Promise 数组时特别有用。
• jQuery.when() 聚合多个 Promise 并返回单个 Promise。

这是一个可以解决您的问题的骨架模式:

$.ajax({...})
.then(function(data) { // then() not success: ...
    var promises = data.d.results.map(function(item) {
        if (item.hasSubMenu == 'Yes') {
            return getSubMenu(item.Id).then(function(subMenu) {
                return '...'; // build and return an HTML string here, including the `subMenu` created by `getSubMenu()`.
            });
        } else {
            return '...'; // return hard-coded HTML. 
        }
    });
    // At this point, promises is an array comprising some unknown mix of jQuery promises and HTML strings.
    return jQuery.when.apply(null, promises).then(function(/* each argument is an HTML fragment, as generated above */) {
        var html = Array.prototype.join.call(arguments, ''); // slightly awkward syntax for joining `arguments` into a single string.
        $("#navbar").html('...' + html + '...');
    });
});

function getSubMenu(id) {
    var url = "...";
    return $.ajax({...}}) // getSubMenu() must return a promise.
    .then(function(data) { // then() not success: ...
        var html = "..."; // initial HTML fragment
        var arr = data.d.results.map(function(item) {
            return '...'; // build and return HTML based on item. 
        });
        // At this point, `arr` is an array of HTML fragments, that can be concatenated with Array#join().
        return html + '...' +  arr.join('') + '...'; // by using .then(), the promise returned by getSubMenu() will deliver whatever is returned here.
    });
}

全文:

var url = "/_api/lists/getbytitle('GlobalTopNavMenu')/items?$select=Id,Title,Image,hasSubMenu,Link&$filter=Location eq 'GlobalNavigation'";
$.ajax({
    url: url,
    method: "GET",
    headers: {
        "Accept": "application/json; odata=verbose"
    }
}).then(function(data) {
    var promises = data.d.results.map(function(item) {
        if (item.hasSubMenu == 'Yes') {
            return getSubMenu(item.Id).then(function(subMenu) {
                return '<li class="dropdown yamm-fw borderLeftY"><a href="#" title="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' + Res[item.Title] + '<b class="caret"></b></a>' + subMenu + '<dl class=""><dd class="picHolder"><img alt="" src="/PublishingImages/' + item.Image + '"/></dd></dl></div></div></li></ul></li>';
            });
        } else {
            return '<li class="yamm-fw borderLeftY"><a href=#"' + item.Link + '" title="" class="dropdown-toggle" role="link" aria-haspopup="true" aria-expanded="false">' + Res[item.Title] + '</a></li>';
        }
    });
    return $.when.apply(null, promises).then(function() {
        $("#navbar").html('<ul class="nav navbar-nav nav-topmrgn">' + Array.prototype.join.call(arguments, '') + '</ul>');
    });
});

function getSubMenu(id) {
    var url = "/_api/lists/getbytitle('GlobalSubNavMenu')/items?$select=Id,Title,Link,ParentMenu/Id,root&$filter=ParentMenu/Id eq " + id + "&$expand=ParentMenu/Id";
    return $.ajax({
        url: url,
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        }
    }).then(function(data) {
        var html = (data.d.results.length < 6) ? '<ul class="dropdown-menu width500 spaceLeft">' : '<ul class="dropdown-menu width800 spaceLeft">';
        html += '<li><div class="yamm-content"><div class="row">';
        var arr = data.d.results.map(function(item) {
            return '<dd class=""><a href=/' + (item.root ? '' : lang) + item.Link + '>' + Res[item.Title] + '</a></dd>';
        });
        return html + '<dl class="col-sm-3 mega-menu colborderRight">' +  arr.join('') + '</dl>';
    });
}