来自多个来源的 Ajax 请求，包括 google api

Question

我有一个问题正在尝试寻找解决方案。在前端我试图显示数据供用户在 HTML 表中进行比较。使用 Ajax 请求从三个数据源获取我的数据。

数据源 1：耗时约 8 秒 数据源 2：耗时约 8 秒 数据源 3：耗时约 30 秒

我的方法- Ajax 调用是在如下所示的函数中进行的：-

   function fetchAjax(){
         aggregatedAjaxObj = {}

         ajax.request1(){

    }
       ajax.request2(){

    }
       ajax.request3(){

    }

 //Add all the response in the  aggregatedAjaxObj Object.

}

function render(){

// render the object in the html table & display after a interval of 30 sec
}

我正在使用 Node.js、Backbone js 和 Jquery。

如果有更好的方法很想尝试一下。

Answer 1

您在这里有一个race condition，并引入了 30 秒的延迟。此外，您还有全局状态。

这两个都非常不可靠而且很糟糕。

假设您不想使用已有的工具引入一个好的 promises 库（我推荐bluebird）：

使用 jQuery：

var request1 = $.ajax(...);
var request2 = $.ajax(...);
var request3 = $.ajax(...);
$.when(request1,request2,request3).done(function(results){
    // results contains all 3 request data
    // no delay, will resolve when all 3 are done
    // requests are made simultaneously
    render(results);
});

使用标准 Promise（兼容 Bluebird）：

var request1 = $.ajax(...);
var request2 = $.ajax(...);
var request3 = $.ajax(...);
Promise.all(request1,request2,request3).then(function(results){
    // results contains all 3 request data
    // no delay, will resolve when all 3 are done
    // requests are made simultaneously
    render(results);
});

lambda 总是可以不用的，你可以这样做：

Promise.map(["url1","url2","url3"],$.get).all(render);