javascript - 来自多个来源的 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 秒的延迟。此外，您还拥有全局状态。

这两者都非常不可靠且糟糕。

假设您不想使用已有的工具引入一个好的 Promise 库(我推荐 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);