在 Chrome 桌面端使用 Wake Lock API 时，很多人代码写到一半，运行时却弹出一个 `TypeError`，提示 `release is not a function`——这种情况其实非常普遍。问题到底出在哪？核心原因就是：`navigator.wakeLock.request('screen')` 返回的是一个 **Promise**，而不是我们直觉中以为可以直接调用的 WakeLock 实例。如果没有等待这个 Promise 解析完成就去调用 `.release()`，自然会报错，因为 Promise 对象上根本没有 `release` 这个方法。 **根本原因一句话：变量拿到的是 Promise，不是实例。** 那正确的做法是什么？很简单——先用 `await` 拿到实例，再调用 `release()`。下面是一套推荐的生产级实现方案： ```javascript let wakeLock = null; async function requestWakeLock() { try { if ('wakeLock' in navigator) { wakeLock = await navigator.wakeLock.request('screen'); console.log('✅ Screen wake lock acquired'); wakeLock.addEventListener('release', () => { console.log('⚠️ Wake lock was released automatically'); wakeLock = null; }); } else { console.warn('❌ Wake Lock API not supported'); } } catch (err) { console.error('❌ Failed to acquire wake lock:', err.name, err.message); } } async function releaseWakeLock() { if (!wakeLock) return; try { await wakeLock.release(); console.log('✅ Wake lock released'); wakeLock = null; } catch (err) { console.warn('⚠️ Release failed or already released:', err.name); } } ``` 这里有几个关键点值得留意： - **调用时机**：`wakeLock.request()` 必须在用户手势上下文中执行（例如 `click`、`keydown`），否则会抛出 `NotAllowedError`。 - **浏览器兼容性**：目前仅在 Chromium 88+（Chrome/Edge）及 Firefox 119+ 中支持，因此务必先用 `if ('wakeLock' in navigator)` 做特性检测。 - **资源管理**：最好在页面卸载前（如 `beforeunload` 事件）或功能结束时主动调用 `releaseWakeLock()`，避免锁长期占用系统资源。 - **错误容忍**：`wakeLock.release()` 支持多次调用（幂等），释放后再次调用会直接返回一个已 `fulfilled` 的 Promise，无需额外判空。 ### ❌ 常见错误示例（应避免） 很多人会写成类似下面这样： ```javascript // ❌ 错误：未 await，wakeLock 是 Promise，不是 WakeLock 实例 const wakeLock = navigator.wakeLock.request('screen'); wakeLock.release(); // TypeError! // ❌ 错误：用 then 调用 release，冗余且容易混淆 wakeLock.then(wl => wl.release()); // 虽能工作，但不推荐 ``` ### ✅ 最佳实践总结 - 统一使用 `async/await` 处理 `request()` 和 `release()`，避免混用 `then`。 - 将 `wakeLock` 声明为模块级变量（`let wakeLock = null`），便于状态跟踪。 - 在 `release()` 后显式将 `wakeLock` 置为 `null`，防止后续逻辑误判。 - 可以结合 `visibilitychange` 事件自动释放锁，例如标签页失焦时： ```javascript document.addEventListener('visibilitychange', () => { if (document.hidden && wakeLock) { releaseWakeLock(); } }); ``` 以上就是一套相对完整的屏幕唤醒锁管理方案。在 Windows Chrome 桌面环境下，按这个流程执行，基本不会再遇到 `release is not a function` 的报错——同时也覆盖了兼容性、资源释放和自动化处理等要点。