jQuery .each l oop с ajax запросом - PullRequest
Новая
       14

jQuery .each l oop с ajax запросом

0 голосов
/ 21 февраля 2020

Я новичок здесь. 

$.each(a, function (i, obj) {
    $('#labelid').html("inserting this data: "+obj.somedata);
    // some other code

    $.ajax({
        // ajax request with insert
    });
});

У меня есть каждый l oop, и внутри него есть запрос ajax, который просто вставит некоторые данные вместе с другим кодом, главным образом для изменения своего рода метки «статуса» ( msgstr "вставить это: (некоторые данные)").

Моя проблема в том, что когда l oop выполняется, код внутри него, за исключением запроса ajax, выполняет итерацию до конца, показывая в моем ярлыке что-то вроде «вставки этого: (последняя строка элемента)» «пока запрос ajax все еще выполняется в фоновом режиме.

Я хочу добиться чего-то вроде этого: 1. Метка показывает« вставка 1-го набора данных »2. ajax запрос вставляет 1-й набор данных 3. Метка показывает «вставка 2-го набора данных» 4. ajax запрос вставляет 2-й набор данных

Возможно ли это? Я не хочу использовать asyn c: false.

Спасибо

Ответы [ 4 ]

0 голосов
/ 21 февраля 2020

Оберните ваш запрос ajax внутри обещания и используйте ожидание для вызова обещания, поэтому выполнение кода ожидает ответа обещания на ответ ajax, и вы можете установить метку в требуемом формате. 

const response = await new Promise((accept, reject) => $.ajax({
  url: url,
  type: "POST",
  success: data => accept(data),
  error: (request, status, error) => reject({ request, status, error })
}));
0 голосов
/ 21 февраля 2020

A для l oop не будет работать в этом случае, потому что запросы асин c. У вас есть 2 варианта.

  1. Если вы хотите использовать для l oop, установите asyn c в false в $. ajax
  2. Используйте рекурсивный подход, т.е. отправьте следующий запрос только тогда, когда приходит ответ на запрос. Это можно сделать, создав рекурсивную функцию.
0 голосов
/ 21 февраля 2020

Вот небольшая обертка обещания над jQuery Ajax. Я думаю, что это будет работать с $.each. 

const _ajaxAsync = url => new Promise((accept, reject) => $.ajax({
    url: url,
    type: "POST",
    success: data => accept(data),
    error: (request, status, error) => reject({ request, status, error })
}));

$.each(a, async function (i, obj) {
    $('#labelid').html("inserting this data: " + obj.somedata);
    // some other code

    let res = await _ajaxAsync('https://example.com').catch(e => console.log(e));
    console.log(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0 голосов
/ 21 февраля 2020

Потому что Ajax Запросы являются асинхронными , поэтому ваш l oop не будет ждать своего ответа и сразу же перейдет к следующему. Для выполнения Ajax как Синхронный Вам необходимо добавить следующую опцию. 

$.ajax({
    async: false,
    // your other options
})
...