如何调整jQuery执行顺序 让AJAX获取图片参数先于本地数据库插入执行

问题根因 #

• $.ajax 默认是异步执行模式，不会阻塞后续代码运行，请求发送后就会直接执行后面的数据库插入逻辑
• 原有代码中getPicture的return语句写在AJAX的success回调内，返回值无法传递到外层的newpic变量，函数本身默认返回undefined
• 数据库插入操作没有等待AJAX请求返回结果就触发，必然出现执行顺序颠倒的问题

修正方案 #

将AJAX请求封装为Promise对象，配合async/await语法控制执行流程，确保拿到图片名称后再执行SQL插入操作。

1. 改造getPicture函数 #

function getPicture(zItemID) {
  // 返回Promise对象，用于后续等待请求结果
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "POST",
      url : '/get_new_picture.php?IT=' + zItemID,
      dataType: "json",
      success: function(data) {
          alert('PIC: ' + data );
          resolve(data); // 请求成功时返回图片名称
      },
      error: function(err) {
          alert('获取图片失败');
          // 若需要不中断流程可以走降级逻辑，比如返回默认图片名
          // resolve('default_pic.png');
          reject(err); // 若需要中断流程则抛出错误
      }
    });
  })
}

2. 改造表单提交点击事件 #

// 回调函数增加async关键字，支持内部使用await语法
$("#submit_item").click(async function(e){
    e.preventDefault();
    var prodID = $("#i_admin_prodID").val();
    var userID = $("#i_admin_uid").val();
    var drawSize = $("#i_admin_dSize").val();
    var pocket = $("#i_admin_pocket").val();
    var orgItemID = $("#i_admin_orgItemID").val();
    var itemID = $("#admin_item_id").val();
    let newpic = ''; // 初始化图片名称变量
    if ( itemID ) {
      // 等待AJAX请求返回结果后，再执行后续代码
      newpic = await getPicture(itemID);
    }
    // 拿到newpic后再执行数据库插入操作
    db.transaction(function (tx) {
        // INSERT语句中直接使用已经赋值完成的newpic变量即可
        tx.executeSql("INSERT INTO vend_products ...")
      }, function(error) {
        alert("error" + error.message);
      }, function() {
        sendOrdertoEmail();
    });
}); 

内容的提问来源于stack exchange，提问作者glatin