Question

我试图了解Jquery中的Promise。在下面的例子中，我试图从一个数组加载一组网址，并在加载后，我想在html中附加一个文本

class BaseClass
{
    /// <summary>Built-in class variable 1.</summary>
    public float var1;
    ...
}

但文字＆＃34;已完成＆＃34;没有追加。 http://plnkr.co/edit/EEaQqfnUyVHGZBgDCRPs?p=preview

中的源代码

Answer 1

我在这里看到三个不同的问题。

当ajax调用结束时，你的循环索引是错误的，因为for循环在async ajax调用完成之前已经运行了。
您需要找到一种方法，等到最后一次异步操作完成后再附加“完成”。你可以正确地使用承诺。
您的ajax结果不一定按顺序附加，因为它不确定ajax调用将完成的顺序。根据服务器体系结构和请求中涉及的内容，它们“可能”按照请求的顺序完成，但由于你并行运行它们，当然无法保证。

第一个问题是因为操作是异步的，因此在异步操作完成时，循环索引处于最终值。有关问题该部分的解决方案，请参阅this answer。在此处查看使用您的代码实施的解决方案：http://plnkr.co/edit/cUFGZL0Bm6unRca3X7N5?p=preview

如果您想知道所有ajax操作何时完成，以便您可以附加“完成”，那么您将需要正确使用promises。你可以这样做：

  <script>
    array1 = ["helloworld.html", "helloworld.html", "helloworld.html"]

    loadData(array1).then(function() {
      $('pre').append("done");
    }, function() {
      // handle error here
    });


    function loadData(gim) {
        var promises = [];
        for (var i = 0; i < gim.length; i++) {
          (function(index) {
            console.log(index);
            promises.push($.get(gim[index]).then(function(data) {
              console.log("a = " + index);
              $('pre').append(data+" -- "+index+"<br>");
            }));
          })(i);
        }
        return Promise.all(promises);
      }
  </script>

工作示例：http://plnkr.co/edit/KrC7Lxu9OHs9suvNOC8t?p=preview

在这里，您收集$.get()返回到数组中的一系列承诺，并使用Promise.all()告诉您所有这些承诺何时完成。

仅供参考，此代码不保证结果将按顺序附加，因为异步操作可以按任何顺序完成。

如果您想并行运行操作，但要确保按要求的顺序添加操作，那么您可以像这样更改代码以收集所有结果，然后按保证顺序将结果添加到DOM： / p>

  <script>
    array1 = ["helloworld.html", "helloworld.html", "helloworld.html"]

    loadData(array1).then(function() {
      $('pre').append("done");
    }, function() {
      // handle error here
    });


    function loadData(gim) {
        var promises = [];
        for (var i = 0; i < gim.length; i++) {
          promises.push($.get(gim[i]));
        }
        return Promise.all(promises).then(function(results) {
          results.forEach(function(item, index) {
            $('pre').append(item + " -- "+index+"<br>");
          });
        });
      }
  </script>

工作示例：http://plnkr.co/edit/nUHwFMg22V8rc9v12SqR?p=preview

如果你只想使用jQuery promise函数（有点非标准），你可以这样做：

  <script>
    array1 = ["helloworld.html", "helloworld.html", "helloworld.html"]

    loadData(array1).then(function() {
      $('pre').append("done");
    }, function() {
      // handle error here
    });


    function loadData(gim) {
        var promises = [];
        for (var i = 0; i < gim.length; i++) {
          promises.push($.get(gim[i]));
        }
        return $.when.apply($, promises).then(function() {
          var results = Array.prototype.slice.call(arguments);
          console.log(results);
          results.forEach(function(item, index) {
            $('pre').append(item[0] + " -- "+index+"<br>");
          });
        });
      }
  </script>

工作示例：http://plnkr.co/edit/IHMnEbYEFLjfguDkoubg?p=preview

jquery承诺：不执行api

1 个答案: