通用方向导轨外部 API答案

【问题标题】：General direction rails external API通用方向导轨外部 API
【发布时间】：2015-02-05 03:45:03
【问题描述】：

我正在开发一个使用 Edmunds 外部 API 的 rails 应用程序。 http://developer.edmunds.com/

在主页上，我正在尝试创建一个动态选择下拉框。这是事件的顺序。

1) 在主页加载时，选择下拉列表会填充所有新车品牌（丰田、本田等）

2) 当用户选择特定的汽车品牌时，会出现第二个选择下拉列表，其中列出了特定于该品牌的所有汽车型号。（凯美瑞、雅阁等）

3) 对于汽车的特定装饰和样式，会出现相同的顺序。最终结果是一辆特定的汽车（Toyota Camry LE 2DR）。

4) 用户点击提交按钮，汽车的属性被保存到具有相同对应属性的汽车模型中。

我正在寻找解决此问题的最佳方法的高级概述。

目前，我的动态选择框行为正常。问题是它都是 Jquery 并且每次选择新的 make 时都会调用 AJAX。

$.ajax({
  type: "GET",
  url: "http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&state=new&api_key=" + edmunds_api_key,
  dataType: "jsonp",
  success: function(data) {
    var makeArray = data.makes;
    console.log(data.makes);
    $.each(makeArray, function(index, value) {
      $('#make_id').append('<option value="' + value.name + '">' + value.name + '</option>');
    });
  }
});

$(document).on('change', '#make_id', function() {
  retrieve_model(this.value);
});

function retrieve_model(make) {
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, function(data) {
    var modelArray = data.models;
    console.log(data.models);
    $('#model_id').empty();
    $.each(modelArray, function(index, value) {
      $('#model_id').append('<option>' + value.name + '</option>');
    });
  });
}

我知道有更好的方法来做到这一点。我只是不确定如何去做，或者在实现这类应用程序时最好的做法是什么。

寻找有关如何按照描述进行项目的一般指导。

在主页加载时，我可以拨打 1 个电话，然后在整个过程中使用该数据吗？而不是打多个不必要的电话。

我确实找到了很多关于这个主题的以前的帖子。如..Using ActiveRecord interface for Models backed by external API in Ruby on Rails

大多数都超出了我的想象或用于旧版本的 Rails。有什么建议吗？

【问题讨论】：

您能否更清楚您的目标 - 您是否试图避免对 Edumnds API 的攻击？你想让它更快吗？如果它很慢，那么什么部分很慢？如果您查看 edmunds.com 网站，他们会在每次用户选择模型时发出 AJAX 请求，但他们会在浏览器上缓存响应，因此当您第二次请求相同模型时，数据返回的速度会更快一些.
我希望选择下拉菜单动态生成并将结果保存到数据库中。我是新手，不确定向外部 API 发出这么多请求是否合适。我的所有 Jquery 解决方案是可以接受的，还是涉及 Rails 控制器/模型的解决方案更好？

标签： jquery ruby-on-rails api ruby-on-rails-4

【解决方案1】：

我会检查您的 API 许可证并计算预期数量 - 他们可能会将您限制为 x 连接/秒/小时。如果你能接受这些限制，我看不出有任何理由不使用 API。您可以放置一些常识性缓存来防止不必要的调用（未经测试）：

$(document).on('change', '#make_id', function() {
  writeModels(retrieve_model(this.value));
});

var modelCache = {};

function retrieve_model(make) {
  if (modelCache[make]) {
    return modelCache[make]; //return cached value
  }
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, { 
    context: this,  //needed to ensure "make" is correct in the complete callback
    complete: function(data) {
      var modelArray = data.models;
      console.log(data.models);
      modelCache[make] = data.models; //populate cache
    }
  });
}

function writeModels(modelArray) {
  $('#model_id').empty();
  $.each(modelArray, function(index, value) {
    $('#model_id').append('<option>' + value.name + '</option>');
  });
}

【讨论】：