Ждать нескольких ajax вызовов внутри функции? - PullRequest
Новая
       1

Ждать нескольких ajax вызовов внутри функции?

1 голос
/ 07 мая 2020

Контекст: создание ajax тяжелой страницы, которая изменяет значения в разных селекторах в зависимости от того, что было выбрано предыдущими селекторами. Работа над созданием опции «повторного заполнения» на основе предыдущих записей.

При изменении селектора 1 выполняется вызов ajax, который заполняет оба селектора 2 и 3. Параметры селектора 1 никогда не меняются.

Когда вы «повторно заселяете» предыдущую запись, код начинается с изменения значения селектора 1, а затем активирует событие изменения в селекторе 1. 

function repopulateFromEntry(event)  {
    // We want the children of the parent TR.
    // <tr>
    //  <td>...</td>
    //  ...
    //  <td><button></td>
    // <tr>
    let td_list = event.target.parentElement.parentElement.children;

    $('#selector1').val(td_list[0].innerHTML);
    $('#selector1').change();
    // Do other things that rely on prior to be finished
    // Problem is here.
};

Событие изменения селектора 1 выглядит следующим образом. 

async function executeAjax(url, success) {
    return await $.ajax({
        url: url,
        type: "GET",
        success: success
    });
}

$('#selector1').change(async function(e) {
    await executeAjax('api/selector2' + $("#selector1").val(), function() {
        // Set selector2 from ajax data
    });
    await executeAjax('api/selector3' + $("#selector1").val(), function() {
        // Set selector3 from ajax data
    });
});

После того, как параметры селекторов установлены на основе значения selector1, он затем входит и выбирает правильное значение для селекторов 2 и 3.

Моя проблема в том, что повторный выбор значений для селекторов 2 и 3 вызывается до того, как параметры будут полностью заполнены селекторами, что приведет к сбою повторного выбора.

Мне явно не хватает чего-то в разделе async / await / ajax, чтобы сохранить его от продолжения без выполнения обоих вызовов, но я не понимаю, в чем моя проблема.

1 Ответ

1 голос
/ 07 мая 2020

Хорошо, поэтому я использовал async / await для вызова $. ajax, а затем в вашем обработчике событий изменения я использовал метод .then для обработки полученных данных. (Также можно было использовать asyn c await в обработчике событий, но поскольку он изначально был у вас и не работал, я выбрал обещание).

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

ПРИМЕЧАНИЕ Вам может потребоваться console.log result и вытащить данные, которые вы ищете, прежде чем устанавливать значение каждого селектора. Вы можете сделать это внутри метода .then. 

async function executeAjax(url) {

    let result;

    try { 
        result = await $.ajax({
            url: url,
            type: "GET"
        });

        return result;

    } catch (error) {
        console.log(error);
    }
}

$('#selector1').change(function(e) {

    executeAjax('api/selector2' + $("#selector1").val())
    .then((result) => { 
        // console.log(result);  <-- may need to find and pull the data you are looking for out of result
        // let myVal = result[?]['something'].orother;
        $("#selector2").val(result); 
    });

    executeAjax('api/selector3' + $("#selector1").val())
    .then((result) => {
        // console.log(result);  <-- may need to find and pull the data you are looking for out of result
        // let myVal = result[?]['something'].orother;
        $("#selector3").val(result);
    });

});
...