在一个请求中使用JavaScript发送多个AJAX调用

我在我的网站上有一个页面，可以从中获取航班详细信息

在输入航班详细信息后，我得到了大约400条不同的记录。问题是我必须循环每个记录，并发送单独的API请求以获取酒店信息

我只能使用PHP或JavaScript

使用PHP，它需要花费很长时间。我尝试了几种解决方案：

PHP-解决方案1：使用curl_exec（）

$count=xxx//其中xxx是酒店的数量
对于（$i=0；$i<$count；$i++）{
$hotelCode=$json[“结果”][$i][“酒店代码”]；
$url=”http://cosmos.metglobal.tech/api/static/v1/hotels/“$hotelCode。”/”；
$username='xxx'；
$password='xxx'；
$auth=base64_编码（$username:$password）；
$curl=curl_init（）；
$data=数组(
CURLOPT_URL=>$URL，
CURLOPT_RETURNTRANSFER=>true，
CURLOPT_编码=>“”，
CURLOPT_MAXREDIRS=>10，
CULLOPT_超时=>0，
CURLOPT_HTTP_VERSION=>CURL_HTTP_VERSION_1_1，
CURLOPT_CUSTOMREQUEST=>“获取”，
CURLOPT_HTTPHEADER=>数组(
“授权：基本$auth”，
“缓存控制：无缓存”，
'内容长度：0'
),
);
curl_setopt_数组（$curl$data）；
$response=curl\u exec（$curl）；
$err=curl\u error（$curl）；
curl_close（$curl）；
$json=json_decode（$response，true）；
}

PHP-解决方案2：使用curl\u multi\u exec（）

下面的代码是从堆栈溢出时的应答中复制的

$urls = array() ;
for ($i = 0; $i < $count; $i++) {
    $urls[] = "http://cosmos.metglobal.tech/api/static/v1/hotels/" . $json["results"][$i]["hotel_code"] . "/" ;
}

/* ********** Start Multi Threading ********** */
$active = 0 ;

// cURL multi-handle
$mh = curl_multi_init();

// This will hold cURLS requests for each file
$requests = array();

$options = array(
    CURLOPT_FOLLOWLOCATION  => true,
    CURLOPT_AUTOREFERER     => true,
    CURLOPT_HTTPHEADER      => array("Content-Type: application/json"),
    CURLOPT_SSL_VERIFYPEER  => false,
    CURLOPT_RETURNTRANSFER  => true,
    CURLOPT_USERPWD         => "xxx:xxx"
);

foreach ($urls as $key => $url) {
    // Add initialized cURL object to array
    $requests[$key] = curl_init($url);

    // Set cURL object options
    curl_setopt_array($requests[$key], $options);

    // Add cURL object to multi-handle
    curl_multi_add_handle($mh, $requests[$key]);

    $active++;
}

// Do while all request have been completed
do {
   curl_multi_exec($mh, $active);
} while ($active > 0);

// Collect all data here and clean up
$j = 0 ;
foreach ($requests as $key => $request) {
    $result = curl_multi_getcontent($request); // Use this if you're not downloading into file, also remove CURLOPT_FILE option and fstreams array
    curl_multi_remove_handle($mh, $request); //assuming we're being responsible about our resource management
    curl_close($request);                    //being responsible again.  THIS MUST GO AFTER curl_multi_getcontent();

    $json["results"][$j]["hotel_details"] = json_decode($result, true) ;
    $j++ ;
}

curl_multi_close($mh);
/* ********** End Multi Threading ********** */

$url=array（）；
对于（$i=0；$i<$count；$i++）{
$URL[]=”http://cosmos.metglobal.tech/api/static/v1/hotels/“$json[“结果”][$i][“酒店代码”]。”/”；
}
/***********启动多线程***********/
$active=0；
//卷曲多柄
$mh=curl_multi_init（）；
//这将保存每个文件的cURLS请求
$requests=array（）；
$options=array(
CURLOPT_FOLLOWLOCATION=>true，
CURLOPT_AUTOREFERER=>true，
CURLOPT_HTTPHEADER=>array（“内容类型：application/json”），
CURLOPT_SSL_VERIFYPEER=>false，
CURLOPT_RETURNTRANSFER=>true，
CURLOPT_USERPWD=>“xxx:xxx”
);
foreach（$url作为$key=>$url）{
//将初始化的cURL对象添加到数组
$requests[$key]=curl_init（$url）；
//设置卷曲对象选项
curl_setopt_数组（$requests[$key]，$options）；
//将卷曲对象添加到多重控制柄
curl_multi_add_句柄（$mh，$requests[$key]）；
$active++；
}
//在完成所有请求后执行此操作
做{
curl_multi_exec（$mh，$active）；
}而（$active>0）；
//在此收集所有数据并进行清理
$j=0；
foreach（$key=>$request的请求）{
$result=curl\u multi\u getcontent（$request）；//如果不下载到文件中，请使用此选项，同时删除CURLOPT\u文件选项和fstreams数组
curl_multi_remove_handle（$mh，$request）；//假设我们对资源管理负责
curl_close（$request）；//再次负责。这必须在curl_multi_getcontent（）之后进行；
$json[“结果”][$j][“酒店详细信息”]=json解码（$result，true）；
$j++；
}
卷曲多重闭合（$mh）；
/***********端多线程***********/

两种PHP解决方案都需要1分钟以上的时间来循环遍历所有记录。所以我现在尝试使用JavaScript同步请求发送请求

JavaScript-解决方案1：

for（变量i=0；i

上面的JavaScript解决方案也花费了很多时间，但其中积极的一面是，在从API获取结果后，我可以一个接一个地追加结果

但是我正在寻找一个更好的解决方案来减少加载时间。 因为我在JavaScript中循环记录，所以我不能一次发送所有记录并等待结果

所以我的问题是：

有没有一种方法可以使用JavaScript，在一个AJAX调用中发送多条记录，然后逐个处理所有回复

---

谢谢……P >如果你准备使用一个外部库，我想你可以考虑它的模式，这样你就可以使用他们的方法同时发送所有的<代码> $GET 请求：

Rx.Observable.forkJoin(array)
  .subscribe(function(data) { 
    /* data for all requests available here */ 
  }

---

演示：

$（文档）.ready（函数（）{
//使用for循环将（）请求推送到数组中
变量数组=[
$.get（'https://api.chucknorris.io/jokes/random'),
$.get（'https://api.chucknorris.io/jokes/random'),
$.get（'https://api.chucknorris.io/jokes/random'),
$.get（'https://api.chucknorris.io/jokes/random')
];
//同时发出所有http请求
Rx.可观测的forkJoin（阵列）
.订阅（功能（数据）{
//分别处理每个请求的响应
$（'body'）.append（数据[0].value+'
）；
$（'body'）.append（数据[1].value+'
）；
$（'body'）.append（数据[2].value+'
）；
$（'body'）.append（数据[3].value+'
'）；
})
})；

你可以通过使用Promises来实现这一点，或者更好地使用

try/catch

和

async/wait

来实现。你能给我一个链接到一个在线示例，或者解释更多内容吗？因为我不太熟悉，如果你觉得这个链接有用，请竖起大拇指。问题是PHP解决方案在ret之前得到了所有的结果使用典型的Ajax解决方案，你可以在客户端一个接一个地获得结果，这样用户就不会在只需要前5名的情况下（通常情况下）永远等待大量结果。我建议使用Ajax路线，可能是延迟加载，只加载可见元素的数据。我尝试使用上述方法

for (var i = 0; i < maxCount; i++) {
    var thisHotel = extJson.hotels.results[i] ;
    var hotelCode = thisHotel.hotel_code;

    $.get("/travel/hotel_pro_details/" + thisHotel.hotel_code, function (json) {  // /travel/hotel_pro_details/ is a function on my website that calls HotelsPro API
        //Code Handling Here
    }
}

Rx.Observable.forkJoin(array)
  .subscribe(function(data) { 
    /* data for all requests available here */ 
  }