Web Locks API 是一种浏览器提供的锁机制,用于协调同一源(same-origin)下不同上下文(如不同的标签页、worker 等)之间对共享资源的访问。这个 API 可以帮助你避免竞态条件和数据不一致的问题。以下是 Web Locks API 的基本用法和一些示例:
基本概念:
锁名称:每个锁都有一个唯一的名称锁模式:有 "exclusive"(独占)和 "shared"(共享)两种模式锁作用域:默认为 "same-origin"基本语法:
navigator.locks.request(lockName, options, callback);简单示例:
navigator.locks.request('my-resource', async lock => { // 在这里访问受保护的资源 await doSomethingWithResource(); });使用不同的锁模式:
// 独占锁(默认) navigator.locks.request('my-resource', {mode: 'exclusive'}, async lock => { // 只有一个上下文可以获得这个锁 }); // 共享锁 navigator.locks.request('my-resource', {mode: 'shared'}, async lock => { // 多个上下文可以同时获得这个共享锁 });设置超时:
navigator.locks.request('my-resource', {timeout: 5000}, async lock => { if (lock) { // 成功获得锁 } else { // 超时未能获得锁 } });检查锁状态:
const state = await navigator.locks.query(); console.log(state.held); // 当前持有的锁 console.log(state.pending); // 等待中的锁请求实际应用示例 - 保护 IndexedDB 事务:
async function safeTransaction(dbName, storeName, mode, callback) { return navigator.locks.request(`idb-${dbName}-${storeName}`, async lock => { const db = await openDatabase(dbName); const transaction = db.transaction(storeName, mode); const store = transaction.objectStore(storeName); try { await callback(store); await transaction.complete; } catch (error) { transaction.abort(); throw error; } finally { db.close(); } }); } // 使用 safeTransaction('myDB', 'users', 'readwrite', async store => { await store.put({id: 1, name: 'Alice'}); });
注意事项:
Web Locks API 是异步的,通常与 async/await 一起使用。锁的释放是自动的,当回调函数执行完毕时锁会自动释放。要小心死锁情况,避免在持有锁时请求另一个锁。目前并非所有浏览器都支持 Web Locks API,使用前需要检查兼容性。Web Locks API 提供了一种强大的方式来协调不同上下文之间的资源访问,特别适用于需要跨标签页或与 Web Workers 协调的场景。然而,它的使用应该谨慎,仅在真正需要时才使用,以避免不必要的复杂性。
网友回复
js如何流式输出ai的回答并折叠代码块,点击代码块右侧可预览代码?
ai大模型如何将文章转换成可视化一目了然的图片流程图图表?
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写?
rtsp视频直播流如何转换成websocket流在h5页面上观看?
为啥coze会开源工作流agent coze studio?
如何检测网页是通过收藏夹打开的?
python如何实现类似php的http动态脚本请求处理响应代码?
js如何实现类似php的http动态脚本请求处理响应代码?
trae与solo有啥区别不同?
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务?