Question

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

我知道你可以把所有东西都嵌入回调中，但那会非常丑陋，更不用说下一个想要扩展它的开发人员不知道该做什么。

所以，例如，这是我的代码（当然，，不起作用，只返回undefined，但这里有一个我喜欢它的例子在逻辑上工作）：

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('<select>'+getCategories('html')+'</select>');

我怎么能这样做呢？我是否可以使用一些JS技巧或者我可以使用的每个函数都有一个回调，例如getCategories('html',function(){})？

如果一切都需要回调，那么你是否有任何关于制作一个大多数JS应用程序的提示，以及很多AJAX调用可以轻松扩展？

更新

根据要求，对于开发人员来说，如果他想要做一些事情，比如标签，类别和帖子，那将是一件痛苦的事情：

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

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

1 个答案: