Как получить данные через ajax?

Question

[ignat07]

Здравствуйте, у меня есть база данных с таблицей , в которой большой объем данных . При запросе к миллиону записей у меня не справляется сервер. Потому я решил загружать обрабатывать данные по порциям, например по 10 тысяч каждая. Данные получаются в ajax и выводятся на страничку. Объем данных регулируется skip и limit в запросе . Мне нужно как то сделать условно 10 ajax запросов, чтобы по итогу получилась одна общая data. Мне посоветовали сделать это через promise. Я только не знаю, как сделать ,чтобы задачки выполнялись по очереди с изменяющимся skip , который передается в запрос. Пока получилось так

$.ajax(
        {
            url: urlToCreated + '/' + id,
            type: 'GET',
            dataType: 'json',
            data: {skip: skip, limit: 100000},
        }
    ).promise().then(function (data) {
    })

подскажите, как сделать 10 таких запросов, с меняющимся на каждой итерации skip

Answer 1

[Алексей Шашенков]

Вот как можно отправить по очереди запросы с помощью промисов по очереди

var promise = Promise.resolve();
var result = []
for(let i =0; i< 3;i++){
promise = promise.then(()=> $.ajax(
        {
            url: urlToCreated + '/' + id,
            type: 'GET',
            dataType: 'json',
            data: {skip: skip, limit: 100000},
        }
    ).promise().then(function (data) {
  result.push(data)
    }))
}

Comments

[ignat07]

Спасибо очень выручили, разве что проблемка с skip может быть в for цикле. Надо как - то грамотно на каждой итерации его увеличивать

[Алексей Шашенков]

Это уже мелочи

Answer 2

[Ihor Bratukh]

Вот хороший пример на es5, без Promise и async/await если Вам это важно:

var result = {};

deferredParallel([1, 2, 3, 4, 5], function (id) {
    return $.ajax({
        url: urlToCreated + '/' + id,
        method: 'GET',
        dataType: 'json',
        data: {
            skip: skip,
            limit: 100000
        },
        success: function (data) {
            result[id] = data;
        }
    });
}).done(function () {
    console.log(result);
});

function deferredParallel(items, callback) {
    var deferreds = [];
    for (var i = 0; i < items.length; i++) {
        var deferred = callback(items[i], i, items);
        if (typeof deferred === 'object' && deferred.done && deferred.fail) {
            deferreds.push(deferred);
        }
    }
    return $.when.apply(null, deferreds);
}

А вот рабочий пример, который вы можете запустить в консоли, например даже тут на тостере:

var result = [];

deferredParallel([1, 2, 3, 4, 5], function (item) {
    return $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/' + item,
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            result.push(data);
        }
    });
}).done(function () {
    console.log(result);
});

function deferredParallel(items, callback) {
    var deferreds = [];
    for (var i = 0; i < items.length; i++) {
        var deferred = callback(items[i], i, items);
        if (typeof deferred === 'object' && deferred.done && deferred.fail) {
            deferreds.push(deferred);
        }
    }
    return $.when.apply(null, deferreds);
}

Пример выше делал запросы паралельно, в network это выглядит так:
▮▮▮▮
▮▮▮▮
▮▮▮▮
□□□□□□ READY

Следующий пример последовательный:
▮▮▮
□□□□□▮▮▮
□□□□□□□□□□▮▮▮
□□□□□□□□□□□□□□□ READY

var result = [];

deferredQueue([1, 2, 3, 4, 5], function (item) {
    return $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/' + item,
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            result.push(data);
        }
    });
}).done(function () {
    console.log(result);
});

function deferredQueue(items, callback) {
    var ready = $.Deferred();
    ;(function fire (i) {
        var deferred = callback(items[i], i, items);
        if (typeof deferred === 'object' && deferred.done && deferred.fail) {
            deferred.done(function () {
                items[i + 1] ? fire(++i) : ready.resolve();
            });
        }
    }(0));
    return ready;
}

Comments

[ignat07]

мне в вопрос скорости упирается

[Ihor Bratukh]

ignat07, тогда параллельно. Общее время всех запросов будет равняться самому длинному одному запросу.

Answer 3

[Alex]

В вашем случае нужно использовать выражение async/await в цикле; Так каждый следующий запрос будет ожидать завершение предыдущего

Comments

[ignat07]

Вы не могли бы мне пример кода для моего условия подсказать. Было бы очень хорошо..

[Alex]

Погуглите. https://medium.com/webbdev/js-8dfa059cae97

[ignat07]

Александр Козак, Cпасибо

[Алексей Ярков]

Александр Козак , А почему не Promise.all? Будет быстрее, ибо параллельно. Зачем ждать выполнения предыдущего запроса?

[Alex]

Алексей Ярков, Потому как автор так хотел

как сделать ,чтобы задачки выполнялись по очереди с изменяющимся skip

[FanatPHP]

Алексей Ярков, .

При запросе к миллиону записей [в один поток] у меня не справляется сервер.

А при долбить сервер 10 запросами одновременно, то всё, разумеется, будет летать.

И, разумеется, у наших шустрых икспертов не возникает вопроса, на кой вообще на странице в браузере миллион записей.

[Алексей Ярков]

Александр Козак, хм... Действительно. Но вангую, что это не принципиально ))

[Алексей Ярков]

FanatPHP, а это уже не наше дело, а дело ТС )) Ну вот эксперимент он хочет поставить. Сервер он кладет миллионом записей, теперь решил браузер испытать.

[Alex]

FanatPHP, Ну мы ж не должны проводить оптимизацию и рефакторинг чужих проектов. Автор спросил "Как зарядить ружё" — Мы отвечаем. А если он хочет после этого выстрелить себе в ногу — это его право :)

[ignat07]

Алексей Ярков, у меня есть dashboard , где есть миллион записей для графика. Мне нужно сделать, чтобы эти данные быстрее обрабатывались, и соответственно грузился быстрее dashboard . Мне интересно, как это сделать

[FanatPHP]

ignat07, очевидно, надо попросить mongo обработать эти данные внутри себя, и выдать уже конечные данные для графика. То есть, не больше нескольких сотен байт.

[Homr]

FanatPHP, вы очень токсичный человек. Давно наблюдаю за вами, большинство ваших комментариев грубые. Также нельзя

[ignat07]

FanatPHP, хорошо, спасибо вам