如何将WebSQL回调函数转换为async/await或Promise链式写法

实现思路 #

Web SQL原生API为回调风格，需要先将其包装为Promise实例，才能适配链式调用或async/await语法。首先封装通用的SQL执行工具方法：

function runSql(db, sql, params) {
  return new Promise((resolve, reject) => {
    db.transaction(
      tx => tx.executeSql(sql, params, (_, res) => resolve(res), (_, err) => reject(err)),
      err => reject(err)
    )
  })
}

Promise 链式（then/catch）写法 #

runSql(db, "SELECT * FROM cal_list where calories > ?", [min_cal_amount])
  .then(res => {
    let htmlFragment = ''
    for (let i = 0; i < res.rows.length; i++) {
      const item = res.rows.item(i)
      htmlFragment += `<li>${item.food} has ${item.amount_of_calories} KCAL worth of calories.</li>`
    }
    list.innerHTML += htmlFragment
  })
  .catch(err => {
    alert(err.message)
  })

async/await 写法 #

需要将逻辑放在异步函数内使用：

async function queryHighCalFood(min_cal_amount) {
  try {
    const res = await runSql(db, "SELECT * FROM cal_list where calories > ?", [min_cal_amount])
    let htmlFragment = ''
    for (let i = 0; i < res.rows.length; i++) {
      const item = res.rows.item(i)
      htmlFragment += `<li>${item.food} has ${item.amount_of_calories} KCAL worth of calories.</li>`
    }
    list.innerHTML += htmlFragment
  } catch (err) {
    alert(err.message)
  }
}

// 调用方法
queryHighCalFood(min_cal_amount)

优化说明 #

• 封装的runSql可复用在所有单条SQL执行场景
• 循环内先拼接HTML字符串再一次性修改DOM，比每次循环直接操作innerHTML性能更高
• 若需要同事务执行多条SQL，可调整runSql逻辑，在同一个db.transaction回调中执行多次tx.executeSql即可

内容的提问来源于stack exchange，提问作者Hasan A Yousef