用 promise 封装 indexeddb 可提升可读性与可维护性，统一处理 open、增删改查等操作的异步流程和错误，通过 withtransaction 自动管理事务生命周期，并支持 async/await 调用。
用 Promise 封装 IndexedDB 是提升代码可读性和可维护性的常用做法。IndexedDB 原生 API 基于事件（onupgradeneeded、onsuccess、onerror），回调嵌套深、错误处理分散；通过 Promise 包一层，就能用 async/await 或 .then() 流畅操作。
封装打开数据库的 Promise
打开数据库是最基础也最易出错的一步。需统一处理版本升级、失败和成功逻辑：
function openDB(name, version = 1) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(name, version);
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve(request.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 示例：创建 objectStore（仅在版本升级时执行）
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
});
}
注意：onupgradeneeded 只在版本号升高或首次打开时触发，不能在里面做读写操作（db 事务未激活），只用于建表或改结构。
封装增删改查操作的 Promise 工具函数
每个操作都应返回 Promise，并自动管理事务生命周期（自动 commit，出错自动 abort）：
-
添加数据：
add或put（put支持更新） -
查询单条：
get，返回 Promise.resolve(value) 或 undefined -
查询全部：
getAll（现代浏览器支持）或用游标遍历 -
删除：
delete，按 key 或 keyRange
// 通用事务执行器：避免重复写事务逻辑
function withTransaction(db, storeName, mode = 'readonly', fn) {
return new Promise((resolve, reject) => {
const transaction = db.transaction(storeName, mode);
const store = transaction.objectStore(storeName);
transaction.oncomplete = () => resolve();
transaction.onerror = () => reject(transaction.error);
transaction.onabort = () => reject(new Error('Transaction aborted'));
fn(store).catch(reject);
});
}
// 添加用户
function addUser(db, user) {
return withTransaction(db, 'users', 'readwrite', (store) => {
return new Promise((resolve, reject) => {
const request = store.put(user);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
});
}
// 查询所有用户
function getAllUsers(db) {
return withTransaction(db, 'users', 'readonly', (store) => {
return new Promise((resolve, reject) => {
const request = store.getAll();
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
});
}
实际调用示例（配合 async/await）
封装好后，使用非常简洁，错误可集中 try/catch：
async function initAndUse() {
try {
const db = await openDB('myAppDB', 1);
await addUser(db, { id: 1, name: 'Alice', email: 'a@example.com' });
const users = await getAllUsers(db);
console.log(users); // [{ id: 1, name: 'Alice', ... }]
} catch (err) {
console.error('DB 操作失败:', err);
}
}
initAndUse();
注意事项与避坑点
- IndexedDB 的
keyPath和autoIncrement要在createObjectStore时确定，后续无法修改 - 事务有生命周期限制：离开函数作用域前必须完成所有请求，否则会被自动中止（常见于忘记 await 或漏掉 Promise 链）
-
getAll()不是所有旧版浏览器支持，如需兼容可封装游标遍历逻辑 - 不要在多个地方重复 openDB，建议用单例模式缓存 db 实例（但注意监听
blocked事件处理版本冲突）
不复杂但容易忽略——Promise 封装的核心是把事件回调转为状态可追踪的异步流程，重点在于事务管理和错误传递的完整性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
