javascript - AJAX 请求 - 添加额外的 GET 请求内循环

Question

我在表格顶部有一个按钮，该按钮显示一个模式窗口以启动 VOIP 调用 - 最终目的是让它调用列表中的第一个号码，然后是第二个号码，依此类推。它可以正常工作，因为它显示模态窗口并允许我向列表中的第一个号码发起调用。

我现在需要更新脚本，这样如果调用成功，它就会在循环中发出另一个 AJAX 请求，比如每 5 秒检查一次调用的状态。如果第一次调用成功，它将返回我存储在 httpResponseText 变量中的以下内容:

Authentication accepted<br/>ActionID = Jo9oACY52cp1

我需要解析出 ActionID 值 - 在上面的示例中这将是 Jo9oACY52cp1 - 然后有另一个 GET 请求来获取当前调用的状态按如下方式传入 ActionID:

https://www.acme.com/GetStatus.php?ActionID=$action_id

此请求返回 3 个值 - ActionID、UID、STATUS - 如下所示:

xshsJ6Y2eLDC,1500806656.160,ANSWER

我只对第三个值感兴趣 - STATUS - 我需要继续检查此请求的结果，直到 Status 不等于 IN_PROGRESS。此时我可以启用“下一个调用”按钮并重新开始。

这是我当前的表和脚本:

$("#startBulkContactCall").click(function() {
  $(this).attr('selectedRow', '1');
  contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile');
  contactName = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactName');
  $('#callNextBulkContact').prop('disabled', true);
  firstURL = "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile;
  console.log('firstURL: ' + firstURL);
  $.ajax({
      url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile,
      data: {},
      type: "GET"
    })
    .then(function(data, status, xhr) {
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      var httpResponseText = (xhr.responseText);
      $('#ajaxSuccessBulk').html('Call in Progress').show();
      $("#startBulkContactCall").prop("disabled", true);
      $("#callNextBulkContact").prop("disabled", true);
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var httpResponseCode = (xhr.getAllResponseHeaders);
      var httpResponseText = (xhr.responseText);
      var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
      //make alert visible 
      $('#ajaxError').html(ajaxError).show();
    })
});

$('#callNextBulkContact').click(function() {
  $('#callBulkContact').attr('selectedRow', parseInt($('#callBulkContact').attr('selectedRow')) + 1);
  var rowNum = parseInt($('#callBulkContact').attr('selectedRow'));
  var row = 'table > tbody > tr:nth-child(' + rowNum + ') > td:nth-child(2)';
  contactMobile = $($($(row).children())[0]).attr('contactMobile');
  contactName = $($($(row).children())[0]).attr('contactName');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<button type="button" id="bulkCallButton" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Bulk Call</button>


<table class="table table2 table-striped table-bordered" width="100%">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Mobile</th>
  </thead>
  <tbody>
    <tr id="D8F49748-212A-42D8-A188-4C23556027FA">
      <td><a href="details.php?action=contactLink&contactID=D8F49748-212A-42D8-A188-4C23556027FA">John Citizen</a></td>
      <td><a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412 345 678</a></td>
    </tr>
    <tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">
      <td><a href="details.php?action=contactLink&contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">Jonah McMahon</a></td>
      <td><a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0490 876 543</a></td>
    </tr>
    <tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">
      <td><a href="details.php?action=contactLink&contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">Jake Simpson</a></td>
      <td><a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0405 999 666</a></td>
    </tr>
  </tbody>
</table>


<div class="modal" id="contactBulkCallModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Call Contact</h4>
      </div>
      <div class="modal-body">
        <p>Calling </p>
      </div>
      <div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none">
        Error Response
      </div>
      <div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none">
        Call in Progress
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="startBulkContactCall" class="btn btn-success">Start Call</button>
        <button type="button" id="callNextBulkContact" class="btn btn-success">Next</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

从来没有做过如此复杂的 AJAX 请求(至少对我而言)并且不确定从哪里开始在循环中添加额外的请求？

Answer 1

这是我会做的:首先在函数中分离代码，这将使事情更容易理解。

startCall 应该启动您的调用，它接收 ajax 应该使用的 callURL。它返回一个一旦做出就会解决的 promise 。

monitorCall 接受一个 callID 和一个回调(内部使用第三个参数“failed_tries”。)它将使用 ajax 触发状态检查，并每 5 秒调用一次，直到连续 5 次失败发生，或者直到我们得到正确的地位。回调是一个普通的 JS 回调，以错误和结果作为参数。

getMonitoredCall 将把前两个函数连接在一起，给出一个一旦调用结束就会解析的 promise 。

getNewCallUrl 用于提供另一个调用。该函数将在每次调用之前调用，以检索要调用的对象。那里有工作留给你!它应该返回一个提供 URL 作为结果的 promise 。

最后，loopCalls 启动一切，一旦调用完成，将再次调用自身以跟进下一个调用，直到出现故障。

function startCall(callURL){
    return $.ajax({
        url: callURL,
        data: {},
        type: "GET"
    }).then(function(data, status, xhr) {
        var httpStatus = status;
        var httpResponseCode = (xhr.status);
        var httpResponseText = (xhr.responseText);
        $('#ajaxSuccessBulk').html('Call in Progress').show();
        $("#startBulkContactCall").prop("disabled", true);
        $("#callNextBulkContact").prop("disabled", true);

        return Promise.resolve(xhr.responseText.match(/ActionID = (.+)/)[1]);
    })
    .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        //make alert visible 
        $('#ajaxError').html(ajaxError).show();
    });
}
function monitorCall(callID,callback,failed_tries){
    failed_tries = failed_tries || 0;
    $.ajax({
        url: 'https://www.acme.com/GetStatus.php',
        data: {ActionID:callID},
        type: "GET"
    }).then(function(data){
        if(data && data.split(',')[2] != "IN_PROGRESS"){
            callback(null,data);
        }else{
            setTimeout(monitorCall.bind(null,callID,callback,0),5000);
        }
    }).fail(function(xhr){
        failed_tries++;
        if(failed_tries>5){
            callback("Error trying to get the status, stopping after 5 consecutive tries.");
        }else{
            setTimeout(monitorCall.bind(null,callID,callback,failed_tries),5000);
        }
    });
}

function getMonitoredCall(callUrl){
    return new Promise(function(resolve,reject){
        startCall(callUrl).then(function(callID){
            monitorCall(callID,function(err,res){
                if(err){
                    reject(err);
                }else{
                    resolve(res);
                }
            });
        });
    });
}

function getNewCallUrl(){
    return $.ajax({
        url: "http://getNewCallUrl/",
        data: {},
        type: "GET"
    }).then(function(data, status, xhr) {
        //Let's presume the request simply returns a call URL.
        return Promise.resolve(data);
    })
    .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        //make alert visible 
        $('#ajaxError').html(ajaxError).show();
    });
}

function loopCalls(){
    getNewCallUrl().then(function(callUrl){
        return getMonitoredCall(callUrl);
    }).then(function(){setTimeout(loopCalls,5000)});
}
loopCalls();