JavaScript 中怎么使用 IndexedDB 结合 Promise 封装现代化的异步操作接口-js教程-PHP中文网

indexeddb 原生 api 事件驱动、冗长易错，promise 封装后支持 async/await，提升可读性与维护性；核心封装 open、add、get、delete 方法，并增强批量操作、游标遍历、事务控制、错误处理及类型安全。

javascript 中怎么使用 indexeddb 结合 promise 封装现代化的异步操作接口

IndexedDB 原生 API 是基于事件的（如 onsuccess、onerror），写起来冗长且容易出错。用 Promise 封装后，能直接配合 async/await 使用，大幅提升可读性和维护性。

封装核心数据库操作：open、add、get、delete

先创建一个轻量级封装类，把打开数据库、增删查改统一转为 Promise：

open：返回 Promise<idbdatabase></idbdatabase>，自动处理版本升级和 objectStore 创建
add：向指定 objectStore 插入数据，支持单条或数组，失败时 reject
get：根据 key 或 IDBKeyRange 查询单条或多条记录
delete：按 key 删除，也支持范围删除

示例关键逻辑：

class IDB {
  constructor(name, version = 1) {
    this.name = name;
    this.version = version;
  }
<p>open() {
return new Promise((resolve, reject) => {
const req = indexedDB.open(this.name, this.version);
req.onerror = () => reject(req.error);
req.onsuccess = () => resolve(req.result);
req.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
});
}</p><p>add(storeName, value) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const req = store.add(value);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
});
}</p><p>get(storeName, key) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName);
const req = store.get(key);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
});
}</p><p>delete(storeName, key) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const req = store.delete(key);
req.onsuccess = () => resolve();
req.onerror = () => reject(req.error);
});
});
}
}</p>

支持批量操作与游标遍历

原生 IndexedDB 的批量写入（如 put 多条）和游标遍历（openCursor）很难直接 Promise 化。封装时可提供：

addAll：批量插入，所有项成功才 resolve，任一失败则 reject（可用 Promise.all 实现）
getAll：兼容性更好的全量读取（内部用游标或 getAll API，优先检测浏览器支持）
iterate：返回 Promise 数组，或用 async generator（需手动实现）遍历每条记录

注意：getAll 在较新浏览器中已原生支持，但 Safari 直到 iOS 16.4+ 才稳定支持，降级方案要用游标手动收集。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

错误处理与事务控制显式化

Promise 封装后容易忽略事务生命周期。建议：

每个方法默认开启独立事务，避免跨调用共享事务导致状态混乱
暴露 transaction 方法，允许用户手动控制多步操作的事务边界（例如“先查再改”必须同事务）
错误统一包装成 IDBError 类型，附带 storeName、operation 等上下文，便于调试

例如手动事务写法：

async function transferBalance(db, fromId, toId, amount) {
  const tx = await db.transaction(['accounts'], 'readwrite');
  const store = tx.objectStore('accounts');
<p>const from = await db.get('accounts', fromId);
const to = await db.get('accounts', toId);</p><p>if (from.balance </p><p>await db.put('accounts', { ...from, balance: from.balance - amount });
await db.put('accounts', { ...to, balance: to.balance + amount });</p><p>return tx.complete; // 确保等待事务结束
}</p>