IDBRequest生命周期分pending、success、error三阶段，需显式绑定onsuccess/onnerror监听；其状态依附事务，事务终止会触发TransactionInactiveError；封装观察者可增强监控能力。
在HTML5的IndexedDB中，IDBRequest对象本身不提供“生命周期钩子”（如onstart、onsuccess、onerror等事件），但它天然承载了单条数据操作（如get、put、delete）的完整异步流程状态。监控其生命周期，本质是合理使用onerror、onsuccess和result属性，并理解其触发时机与事务上下文关系。
掌握IDBRequest的核心状态流转
IDBRequest对象从创建到完成，经历三个关键阶段：
-
pending（挂起）：请求已发出但尚未返回结果，此时
result为undefined，error为null； -
success（成功）：数据库操作完成且无错误，
onsuccess触发，result包含返回值（如get()查到的对象或put()生成的key）； -
error（失败）：操作被拒绝或发生异常，
onerror触发，error属性包含IDBRequestEvent对应的错误信息。
监听成功与失败：必须显式绑定回调
IDBRequest不会自动抛出异常或返回Promise，必须手动设置onsuccess和onerror。遗漏onerror将导致错误静默失败，极难调试。
示例：安全获取一条记录并监控全过程
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const request = objectStore.get(123);
request.onsuccess = function(event) {
console.log('✅ 请求完成，result:', event.target.result); // { id: 123, name: "Alice" }
};
request.onerror = function(event) {
console.error('❌ 请求失败，error:', event.target.error?.name);
// 如 "NotFoundError", "TransactionInactiveError"
};
注意事务生命周期对IDBRequest的影响
IDBRequest的生命依附于其所属事务（IDBTransaction）。若事务提前终止（如未显式commit、被其他操作中断、或页面卸载），所有挂起的请求会立即触发onerror，错误名通常为TransactionInactiveError或AbortError。
因此，真正“监控生命周期”，还需关注事务状态：
- 在事务
oncomplete中确认所有请求已落地； - 在事务
onabort或onerror中统一处理异常链； - 避免在事务关闭后访问
request.result（会报错或返回undefined）。
进阶：封装简易生命周期观察者
可基于原生事件抽象一层轻量监控器，便于日志、埋点或统一错误处理：
function observeRequest(request, label = 'db-op') {
const start = performance.now();
request.addEventListener('success', () => {
const duration = performance.now() - start;
console.log(`? [${label}] success in ${duration.toFixed(1)}ms`);
});
request.addEventListener('error', () => {
const duration = performance.now() - start;
console.warn(`⚠️ [${label}] failed after ${duration.toFixed(1)}ms`, request.error);
});
return request;
}
<p>// 使用
observeRequest(objectStore.put({id: 456, data: 'test'}), 'save-user')
.onsuccess = () => { /<em> 正常业务逻辑 </em>/ };</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
