Question

我有一个项目名称数组，正在遍历并调用下面的函数。我需要将每个ajax调用的结果添加到主数组中，但是我不确定如何实现这一点。理想情况下，我还将显示一条加载消息（完成时使用jquery显示/隐藏，然后显示数据），但是我不确定从哪里开始。

var list = ["node1","node2","node3"]

var items = [];

$.each(list, function( index, value ) {
  getNodes(value.name);
});

function getNodes(name) {

    jQuery.ajax( {
        url: 'http://url.com' + name + '/endpoint',
        method: 'GET',
        dataType: 'json',
        success: function ( data, textStatus, jqXHR ) {
          if ( data.length > 0 ) {            
            jQuery.each( data, function event( key, value ) {

              var info = [];
              info.name = name;
              info.address = this.address;
              info.node = this.node.data;

              items = $.extend(items[name],info);

            } );

          }
        },
        error: function ( jqXHR, textStatus, errorThrown ) {
          alert( 'An error has occured!' );
        }
    } );
}

我的最终目标是拥有一个我可以（一旦完成）循环并对javascript / jquery中的数据执行操作的数组/对象。

   [{
        "node1": [{
            "node1a": {
                "name": "node1",
                "address": "192.168.1.4",
                "node": "somedata"
            },
            "node1b": {
                "name": "node1",
                "address": "192.168.1.5",
                "node": "somedata"
            },
            "node1c": {
                "name": "node1",
                "address": "192.168.1.6",
                "node": "somedata"
            }
        }],
        "node2": [{
            "node2a": {
                "name": "node1",
                "address": "192.168.1.7",
                "node": "somedata"
            },
            "node2b": {
                "name": "node1",
                "address": "192.168.1.8",
                "node": "somedata"
            },
            "node2c": {
                "name": "node1",
                "address": "192.168.1.9",
                "node": "somedata"
            }
        }],
        "node3": [{
            "node3a": {
                "name": "node1",
                "address": "192.168.1.10",
                "node": "somedata"
            },
            "node3b": {
                "name": "node1",
                "address": "192.168.1.11",
                "node": "somedata"
            },
            "node3c": {
                "name": "node1",
                "address": "192.168.1.12",
                "node": "somedata"
            }
        }]
    }]

我遇到的问题是，当我调用该函数来处理完成的数据时，我尝试构建的任何数组似乎都没有填充完毕，因此它返回空值。除此之外，我不确定自己正在做什么，以寻求帮助。也许是异步的，还是承诺？需要指出正确的方向。

Answer 1

如果您使用的是转译器，则可以将async/await与Promise一起使用。它使推理代码的行为变得更加容易。下面的示例说明了如何解决这个问题。

for(let x = 0; x < list.length; x++) {
  const result = await getNodes(list[x]);
  items.push(result);
}

function async getNodes(name) {
  const url = 'http://url.com' + name + '/endpoint';
  return await ajaxCall(url);
}


function ajaxCall(url) {
  return new Promise((resolve, reject) => {
    jQuery.ajax( {
    url: url,
    method: 'GET',
    dataType: 'json',
    success: function ( data, textStatus, jqXHR ) {
      resolve(data);
    },
    error: function ( jqXHR, textStatus, errorThrown ) {
      reject('error');
    }
   } );
  });
}

将多个ajax响应合并到一个数组中

1 个答案: