如何在AJAX和jQuery下实现对API的顺序查询

时间:2018-07-20 12:22:04

标签: javascript jquery ajax promise

有一个URL,用于托管工作单的API。该API提供了一种方法,该方法可以按日期交付客户工作单的抬头。它返回的是工单的代码。还有第二种方法,其中使用工作订单代码返回该订单的详细信息。

不幸的是,API没有一种使我立即看到工作单头和细节的方法。我需要每个工作订单的完整信息,标题和详细信息。

鉴于上述情况,我的策略一直是在jQuery中创建一个小的例程,该例程首先通过AJAX调用API方法,该方法传递给定日期和特定客户的所有工作订单标题。这些标头将它们存储在数组中。在完成上述操作之后,我将通过这种安排并调用API的另一种方法,以获取工作订单的各个详细信息,这些详细信息可以是一个或多个记录。

问题在于,执行时会获得所有标头,但是当执行详细信息查询时,服务器会显示一条消息:

Sorry, we have detected that there are simultaneous requests

无法获取详细信息。在调查主题时,一切都引用了AJAX主题及其异步发生的问题。详细的协商是并行进行的,并且必须按顺序进行,为此,必须使用Promise进行实施。

在一点帮助下,我进行了更改,但仍然出现相同的错误。

实现如下:

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn_nuevo").click(function() {
        var ocs = [];
        var total = 0;
        $('#result').append('<b>total 1: </b>' + total + '<br />');
        //ESTE PRIMER AJAX OBTIENE LA LISTA DE OT
        $.ajax({
          url: "http://api.ot.json?fecha=26062018&Cliente=100ticket=C7A82D65",
          dataType: "json",
          success: function(data) {
            //TOTAL DE OT
            total = data.Cantidad;

            //SE ALMACENAN LAS OT
            for (var i = 0; i < total; i++) {
              ocs[i + 1] = data.Listado[i].Codigo;
            };

            $('#result').append('<b>total 1: </b>' + total + '<br />');

            let promise;
            let j = 0;
            let url = "http://api.ot.json?codigo=" + ocs[j + 1] + "&ticket=C7A82D65";

            for (let j = 0; j < total; j++) {
              if (j === 0) {
                promise = promise || $.ajax({
                  url: url,
                  dataType: "json"
                });
                j++;
              } else {
                promise = promise.then(datos => {
                  $('#result').append('<b>Codigo: </b>' + datos.Listado[0].Codigo + '<br />');
                  $('#result').append('<b>Nombre: </b>' + datos.Listado[0].Nombre + '<br />');
                  $('#result').append('<b>Estado: </b>' + datos.Listado[0].Estado + '<br />');
                  $('#result').append('<b>Descripcion: </b>' + datos.Listado[0].Descripcion + '<br />');
                  $('#result').append('<b>Tipo: </b>' + datos.Listado[0].Tipo + '<br />');
                  url = "http://api.ot.json?codigo=" + ocs[j + 1] + "&ticket=C7A82D65";
                  return $.ajax({
                    url: url,
                    dataType: "json"
                  });
                });
              }
            };
          }
        });
      });
    });
  </script>
</head>
<body>
  <div id="boton_nuevo" align="center">
    <input type="button" id="btn_nuevo" name="btnnuevo" value="Ejecutar">
  </div>
  <div id="result"></div>
</body>
</html>

错误消息如下:

Sample Image


Sample Image

有人可以帮助我吗?


我已经进行了Jaromanda在http://jsfiddle.net/qj80ovw5/2/中指出的修改。

在执行修改后,可以获取第一个工作订单的详细信息,这在以前是不可能的,但是在获取第一个工作订单的数据后,服务器将发送最初指示的相同错误。题。

很明显,服务器不断进行并行查询,这就是服务器以这种方式响应的原因。如何改善工作单细节的恢复,以免发生此错误?

http://jsfiddle.net/qj80ovw5/2/

$(document).ready(function() {
  $("#btn_nuevo").click(function() {
    $('#result').append('<b>total 1: </b>' + total + '<br />');
    //ESTE PRIMER AJAX OBTIENE LA LISTA DE OT
    $.ajax({
      url: "http://api.ot.json?fecha=26062018&Cliente=100ticket=C7A82D65",
      dataType: "json"
    }).then(data => {
      const total = data.Cantidad;

      $('#result').append('<b>total 1: </b>' + total + '<br />');

      let promise = Promise.resolve(); // or $.when() 

      for (let j = 0; j < total; j++) {
        let url = "http://api.ot.json?codigo=" + data.Listado[i].Codigo + "&ticket=C7A82D65";
        promise = promise
          .then(() => $.ajax({
            url: url,
            dataType: "json"
          }))
          .then(datos => {
            $('#result').append('<b>Codigo: </b>' + datos.Listado[0].Codigo + '<br />');
            $('#result').append('<b>Nombre: </b>' + datos.Listado[0].Nombre + '<br />');
            $('#result').append('<b>Estado: </b>' + datos.Listado[0].Estado + '<br />');
            $('#result').append('<b>Descripcion: </b>' + datos.Listado[0].Descripcion + '<br />');
            $('#result').append('<b>Tipo: </b>' + datos.Listado[0].Tipo + '<br />');
          });
      }
    });
  });
});

0 个答案:

没有答案