等待函数内的多个 ajax 调用？

Question

上下文：创建一个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

    });

});

根据选择器 1 的值设置选择器选项后，它进入并为选择器 2 和 3 选择正确的值。

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

我显然从异步/等待/ajax部分遗漏了一些东西，以防止它在没有完成两个调用的情况下继续，但我似乎看不到我的问题是什么。

Answer 1

好的，所以我对 $.ajax 调用使用了 async/await，然后在更改事件处理程序中，我使用 .then 方法对生成的数据进行操作。（也可以在事件处理程序中使用异步等待，但是由于您最初拥有它并且它不起作用，因此我选择了promise）。我很确定这应该有效，但如果没有，请让我知道控制台显示的内容。注意您可能需要在设置每个选择器的值之前，控制台.log结果并提取要查找的数据。您可以在 .then 方法中执行此操作。async function executeAjax(url) {&nbsp; &nbsp; let result;&nbsp; &nbsp; try {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; result = await $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "GET"&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; return result;&nbsp; &nbsp; } catch (error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; }}$('#selector1').change(function(e) {&nbsp; &nbsp; executeAjax('api/selector2' + $("#selector1").val())&nbsp; &nbsp; .then((result) => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // console.log(result);&nbsp; <-- may need to find and pull the data you are looking for out of result&nbsp; &nbsp; &nbsp; &nbsp; // let myVal = result[?]['something'].orother;&nbsp; &nbsp; &nbsp; &nbsp; $("#selector2").val(result);&nbsp;&nbsp; &nbsp; });&nbsp; &nbsp; executeAjax('api/selector3' + $("#selector1").val())&nbsp; &nbsp; .then((result) => {&nbsp; &nbsp; &nbsp; &nbsp; // console.log(result);&nbsp; <-- may need to find and pull the data you are looking for out of result&nbsp; &nbsp; &nbsp; &nbsp; // let myVal = result[?]['something'].orother;&nbsp; &nbsp; &nbsp; &nbsp; $("#selector3").val(result);&nbsp; &nbsp; });});