Question

我一直在寻找很长时间没有运气来解决这个问题。这是我的ajax电话：

function vehicles () {
    return $.ajax({
        type: 'POST',
        url: 'http://some.url',
        data: '{"key1":"value1","key2":"value2"}',
        dataType: 'json',
        success: function(data) {
        },
        error: function() {
            alert('error vehicles');
        }
    });
}

function fillVehicles() {
    vehicles().done(function(data){
        $.each(data, function(index) {
            $('#write-here').append('<div>'+data[index]+'</div>');
        });
    });
}

fillVehicles();

它工作正常。结果是＆＃34; div＆＃34;项目打印正确。但这不是我需要的。

我想做的是：

function vehicles () {
    //...the same as before...
}

var arrVehicles = new Array();

function fillVehicles() {
    vehicles().done(function(data){
        arrVehicles = data;
    });
}

fillVehicles();

$.each(arrVehicles, function(index) {
    $('#write-here').append('<div>'+arrVehicles[index]+'</div>');
});

但结果是＆＃34; div＆＃34;物品不以任何方式显示。这是因为打印在ajax调用完成之前执行，所以arrVehicles是空的。

简而言之，我需要的是从ajax调用中获取数据，将它们放入数组中，然后随意使用数组。

我知道调用ajax async = false会起作用......但我需要async = true的好处。说真的......我一直在寻找很多解决方案而没有运气。

感谢您的帮助！

Answer 1

正如我在评论中提到的，由于客户端服务器通信的异步特性，您无法按照自己的方式编写代码。好吧，至少不是在javascript中。处理它。欢迎来到承诺的世界。：）

如果您希望在加载后随时可以访问异步数据，可以将其存储为Promise形式。

//vehicles will be a 'promise' to return data
var vehicles = $.post('some_url', '{"key1":"value1","key2":"value2"}'); 

//do whatever you need to by passing a function
vehicles.done(function(vehicles) {
   console.log(vehicles); //is array here
});

//for example render
vehicles.done(function(vehicles) {
   $('#write-here').html('<div>' + vehicles.join('</div><div>') + '</div>');
});

您甚至可以使用.then

创建另一个承诺

var hasAudi = vehicles.then(function(vehicles){
   return vehicles.indexOf('Audi') >= 0;
});

hasAudi.done(function(hasAudi) {
   console.log(hasAudi ? 'There is audi.' : 'No OOOO found');
});

获取ajax调用数组的结果，然后打印它

1 个答案: