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

Question

I know this "technically" can't be done as AJAX is async, but an app I'm working on has a lot of AJAX API calls and I'm trying to make this extendable for future front-end devs.

I know you can just nest everything in callbacks, but that'd be super ugly and not to mention the next dev coming along wanting to extend it wont know what to do.

So, for example, here is my code (that, of course , doesn't work and just returns undefined , but here for an example of how i'd like it to logically work):

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;
  });
}

And later on a dev might want to use it in this way: $('div').html('<select>'+getCategories('html')+'</select>');

How could I make this work like that? Can I with some JS trick or would every function I make like this HAVE to have a callback like, getCategories('html',function(){}) ?

If it's everything needs a callback, do you have any tips on making a mostly JS app w/ lots of AJAX calls easily extendable?

UPDATE

As per request, this would be a pain in the ass for a developer if he wanted to do something with, lets say, tags, categories, and posts:

//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

Regarding your examples.

You have three ajax requests in the code and none of them are dependent on each other. So, no reason to execute them sequentially.

As for goGet , it can also take callback easily.

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

If you want to execute code after all data loaded, you can use counter inside.

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
    }
});

You can generalize this callback function, to not declare it multiple times.

A bit simpler: fetch data sequentially.

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