Promises under Jquery and Ajax

0

There is a URL where an Order API is hosted. The API provides a method that delivers the order headers for a customer and on a date. What it returns is an order code. There is a second method where, with the order code, it returns the details of this order. Unfortunately, the API does not have a method that brings me both the header and the detail of the order. I need to have the complete information of each order, its heading and its detail.

Given the above, my strategy has been to make a small routine in jquery that first through Ajax invoke an API method that delivers all the headers of the orders, for a specific date and a specific client. With each order code retrieved in the previous step, I invoke another method of the API to obtain the respective details of the orders, which can be one or several records. The problem is that when executing all the headers are obtained, but when the query of the details is executed, it can only recover the details of the first order, because then it throws an error message, the server responds with a message "Sorry, we have detected that there are simultaneous requests ", without being able to obtain the details.

Apparently, the server continues to receive parallel queries and that is why the server responds in that way. How could this recovery of the details of the orders be improved, so that this error does not occur?

I do not know if it is a problem in the way it was impelled or is it a problem with the jquery version?

<!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 () 
            {
                $.ajax({
                        url: "http://api.mercadopublico.cl/servicios/v1/publico/ordenesdecompra.json?fecha=26062018&CodigoOrganismo=100448&ticket=C7A82D65-B7E3-44AD-8391-56DFD3DF067A",
                        dataType: "json"
                       }).then(data => 
                                      {
                                          const total = data.Cantidad;
                                          $('#result').append('<b>Total: </b>' + total + '<br />');
                                          let promise = Promise.resolve();                          
                                          for (let j = 0; j < total; j++)
                                          {
                                              let url = "http://api.mercadopublico.cl/servicios/v1/publico/ordenesdecompra.json?codigo=" + data.Listado[j].Codigo + "&ticket=C7A82D65-B7E3-44AD-8391-56DFD3DF067A";
                                              $('#result').append('<b>N°: </b>' + j + '<br />');
                                              $('#result').append('<b>Orden: </b>' + data.Listado[j].Codigo + '<br />');
                                              $('#result').append('<b>URL: </b>' + url + '<br />');
                                              $('#result').append('<b>-------------------------------------------------------------------------------------------------------------------- </br>');
                                              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 />');                                            
                                                                                                                                }
                                                                                                                       );
                                          }
                                      }
                              );
            });
        });
    </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>

When reviewing the status monitor, 3 states are observed.

The first is an OK state where the headers of the orders are retrieved (order codes).

The second is an OK state where the detail of the first order is retrieved.

The third state is an error state, where the server responds that simultaneous requests have been detected.

    
asked by Junco Fuerte 21.07.2018 в 18:31
source

0 answers