时间戳

首页 > 解决方案 > 将多个 ajax 响应合并到一个数组中

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

问题描述

我有一个项目名称数组，我正在循环并调用下面的函数。我需要将每个 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"
            }
        }]
    }]

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

标签： javascriptjquery

解决方案

如果您使用的是转译器，则可以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');
    }
   } );
  });
}

推荐阅读