同时独立的AJAX请求

时间:2013-06-30 01:04:11

标签: javascript jquery html

我有一个搜索建议脚本,可以从两个Google API中提取结果,按整数值对结果进行排序,然后将其显示给用户。该脚本确保它仅根据每个查询的rel属性返回每个查询的五个最相关的响应。

JSFiddle:http://jsfiddle.net/22LN5/

然而,通过这种电流设置,没有容错能力;例如,一个API可用或超过一个API的查询限制,因此不会返回任何结果。

如何解决这个问题?

我的jQuery代码是:

var combined=[];
$(document).ready(function(){
    $("#search").keyup(function(e){
        $(this).html("");
        $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data1){
            $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data2){
                for(var key in data1[1]){
                    if(data1[4]["google:suggesttype"][key]=="NAVIGATION"){
                        combined.push("<li rel='"+data1[4]["google:suggestrelevance"][key]+"'><a href='"+data1[1][key]+"'>"+data1[2][key]+"</a></li>");
                    }else{
                        combined.push("<li rel='"+data1[4]["google:suggestrelevance"][key]+"'>"+data1[1][key]+"</li>");
                    }
                }
                for(var key in data2.result){
                    combined.push("<li rel='"+Math.round(data2.result[key].score*5)+"'> Freebase: "+data2.result[key].name+"</li>");
                }
                combined.sort(function(a,b){
                    return +$(b).attr("rel")-+$(a).attr("rel");
                });
                $("#suggest").html(combined.slice(0,5).join(""));
                combined=[];
            });
        });
    });
});

1 个答案:

答案 0 :(得分:1)

我已经更新了你的小提琴:http://jsfiddle.net/22LN5/2/

我掀起了$.whenFaultTolerant,这将在完成或失败的情况下始终返回承诺。传递延迟的散列,然后输出结果的哈希值!这不是一个完整的解决方案,但我希望这是朝着正确方向迈出的良好一步。

$.whenFaultTolerant = function(things) {
    var remaining = Object.keys(things).length;
    var outputs = {};
    var dfd = $.Deferred();
    $.each(things, function(key, thing) {
        thing.always(function(data) {
            outputs[key] = data;
            --remaining || dfd.resolve(outputs);
        });
    });
    return dfd.promise();
};

用法:

    $.whenFaultTolerant({
        suggestqueries: $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?"),
        googleapis: $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?")
    }).done(function(data){
        console.log(data);
    });

输出:

{
    "suggestqueries": <the results from suggestqueries.google.com>,
    "googleapis": <the results from www.googleapis.com>
}