使用包含 jQuery AJAX 调用的普通 JS 函数返回 HTML/JSON？

Question

我知道这在“技术上”是无法完成的，因为 AJAX 是异步的，但我正在开发的一个应用程序有很多 AJAX API 调用，我正在尝试使其可以为未来的前端开发人员扩展。

我知道你可以将所有内容都嵌套在回调中，但这会非常丑陋，更不用说下一个想要扩展它的开发人员不知道该怎么做。

因此，例如，这是我的代码（当然，它不起作用，只是返回未定义，但这里是我想要的示例逻辑上工作）：

var getCategories = function(type){
  var categories;
  $.get('/api/categories/all',function(json){
    if(type == 'html'){
      categories = '';
      for(x in json.data){
        categories=categories+'<option id="category_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
      }
    }
    else{ //JSON
      categories = json.data;
    }
    return categories;
  });
}

稍后开发人员可能想以这种方式使用它： $('div').html(''+getCategories('html')+'');

我怎样才能让这个工作像这样呢？我可以使用一些 JS 技巧吗？还是我创建的每个函数都必须有一个像 getCategories('html',function(){}) 这样的回调？

如果一切都需要回调，那么对于制作一个带有大量 AJAX 调用的主要 JS 应用程序，您有什么建议可以轻松扩展吗？

更新

根据请求，如果开发人员想要对标签、类别和帖子进行某些操作，这对他来说将是一件痛苦的事情：

//Some event on click
$('.button').click(function(){
  $.ajax({
    url: "/api/categories/all",
    success: function(json){
      categories = '';
      for(x in json.data){
        categories=categories+'<option id="category_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
      }
      $.ajax({
        url: "/api/tags/all",
        success: function(json){
          tags = '';
          for(x in json.data){
            tags=tags+'<option id="tags_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
          }
          $.ajax({
            url: "/api/posts/all",
            success: function(json){
              posts = '';
              for(x in json.data){
                posts=posts+'<option id="posts_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
              }

              //And so on...
              //after getting all this data that the developer might want
              //to put this in a modal to edit these items...
            }
          });
        }
      });
    }
  });
});
//On load tho, on the same page, he might want to list "popular" categories, tags, all, and he'd
//have to copy and paste the above code but change, all to popular
//Im looking to make a JS API almost to make this simpler, LIKE:
var tags = goGet('tags','popular');
var categories = gotGet('categoties','all');
//etc

Answer 1

关于你的例子。

代码中有三个 ajax 请求，它们都不相互依赖。因此，没有理由按顺序执行它们。

至于goGet，它也可以轻松回调。

goGet('tags','popular', function(tags) {
    // do something with tags
});

如果你想在所有数据加载后执行代码，你可以在里面使用计数器。

var tags, categories;
var completed = 0;
goGet('tags','popular', function(entities) {
    tags = entities;
    completed++;
    if (++completed == NUMBER_OF_REQUESTS) {
        // execute your code
    }
});
goGet('categories','popular', function(entities) {
    tags = entities;
    completed++;
    if (++completed == NUMBER_OF_REQUESTS) {
        // execute your code
    }
});

您可以概括此回调函数，而不是多次声明它。

更简单一点：顺序获取数据。

goGet('tags','popular', function(tags) {
    goGet('categories','popular', function(categories) {
        // execute your code
    });
});