为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

ibeautiful 2022-08-04 17:14:46
上下文:创建一个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部分遗漏了一些东西,以防止它在没有完成两个调用的情况下继续,但我似乎看不到我的问题是什么。
查看完整描述

1 回答

?
小唯快跑啊

TA贡献1863条经验 获得超2个赞

好的,所以我对 $.ajax 调用使用了 async/await,然后在更改事件处理程序中,我使用 .then 方法对生成的数据进行操作。(也可以在事件处理程序中使用异步等待,但是由于您最初拥有它并且它不起作用,因此我选择了promise)。


我很确定这应该有效,但如果没有,请让我知道控制台显示的内容。


注意您可能需要在设置每个选择器的值之前,控制台.log结果并提取要查找的数据。您可以在 .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);

    });


});


查看完整回答
反对 回复 2022-08-04
  • 1 回答
  • 0 关注
  • 108 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信