等待 function 内部的多个 ajax 调用？

Question

Context: Making an ajax heavy page that changes values in different selectors based on what prior selectors have chosen. Working on making a "repopulate" option based on prior entries.

When selector 1 is changed, an ajax call is made that populates both selector 2 and 3. Selector 1's options never change.

---

When you "repopulate" from a prior entry, the code starts by changing selector 1's value and then activates a change event on selector 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.
};

Selector 1's change event looks like this.

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
    });
});

After the selectors options are set based on selector1's value, it then goes in and selects the correct value for selectors 2 and 3.

---

My problem is that the reselection of values for selectors 2 and 3 is getting called before the options are fully populated to the selectors, making the reselection fail.

I'm clearly missing something from the async/await/ajax section to keep it from continuing without both calls being done, but I can't seem to see what my issue is.

Answer 1

OK, so I used async/await for the $.ajax call, and then in your change event handler, I used.then method to act on the resulting data. (Also could have used async await in the event handler, but since you had that originally and it wasn't working I opted for promise instead).

I'm pretty sure this should work, but if not, please let me know what the console is showing.

NOTE You may need to console.log result and pull out the data you are looking for before setting the value of each selector. You can do that inside the.then method.

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);
    });

});