Javascript 在函数内部等待多个ajax调用？

上下文：制作一个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的值设置选择器选项后，它会进入并为选择器2和选择器3选择正确的值

---

我的问题是，选择器2和3的值的重新选择在选项完全填充到选择器之前被调用，导致重新选择失败

---

很明显，我在async/await/ajax部分中遗漏了一些内容，以防止它在两个调用都没有完成的情况下继续，但我似乎看不出我的问题是什么。

好的，所以我使用async/await进行$.ajax调用，然后在您的更改事件处理程序中，我使用.then方法对结果数据进行操作。（也可以在事件处理程序中使用async await，但由于您最初使用async await，但它不起作用，因此我选择了promise）

我很确定这应该可以工作，但如果不行，请让我知道控制台显示了什么

注意在设置每个选择器的值之前，您可能需要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);
    });

});

异步函数executeAjax（url）{ 让结果； 试试{ 结果=等待$.ajax({ url:url， 键入：“获取” }); 返回结果； }捕获（错误）{ console.log（错误）； } } $（'#选择器1'）。更改（函数（e）{ executeAjax（'api/selector2'+$（“#selector1”）.val（）） .然后（（结果）=>{ //控制台日志（结果）{

---

//console.log（结果）；同样的情况也会发生。它试图在ajax完成填充选择器2和选择器3之前执行代码。@NicholasSteichen好的，我更新了答案，这应该可以工作。在您修复它之前，我实际上已经想到了这一点-仍然标记为正确值。谢谢您的帮助！@NicholasSteichen很高兴它可以工作。干杯！您应该ld从您的

executeAjax

函数中删除回调参数。改用承诺链接！“重新选择选择器2和3的值”-代码在哪里？

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

});