时间戳

首页 > 解决方案 > jquery 和 Ajax 下的 Promise

jquery - jquery 和 Ajax 下的 Promise

问题描述

有一个托管订单 API 的 url。API 提供了一种方法，可以在某个日期为客户提供订单的标头。它返回的是订单代码。还有第二种方法，它使用订单代码返回该订单的详细信息。不幸的是，API 没有一种方法可以立即为我提供订单的标题和详细信息。我需要了解每个订单的完整信息、标题和详细信息。

鉴于上述情况，我的策略是在 jquery 中创建一个小例程，首先通过 Ajax 调用一个 API 方法，该方法为给定日期和特定客户端提供订单的所有标题。这些标头将它们存储在一个数组中。经过上述安排，我通过这个安排，调用API的另一个方法来获取订单各自的详细信息，可以是一条记录，也可以是多条记录。问题是执行的时候获取到了所有的headers，但是在执行details的查询的时候，只能恢复到第一个order的details，因为之后会抛出错误信息，服务端会返回一个message “抱歉，我们检测到有同时请求”，无法获取详细信息。

显然，服务器不断出现并行查询，这就是服务器以这种方式响应的原因。如何改进订单细节的这种恢复，使这个错误不会发生？

我不知道这是我实现方式的问题还是 jquery 版本的问题？

<!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>

查看它抛出的状态时，您会看到 3 个状态，如下图所示：

状态 1

状态 2

状态 3

标签： jqueryajaxes6-promise

解决方案

推荐阅读